fix: hide the create new option if value already exists

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.2-beta-10",
+    "version": "0.2.2-beta-12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -209,7 +209,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     fullWidth = false,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
-    const { inputId, required, isDisabled, controlShouldRenderValue = true, value } = props
+    const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options } = props
     const {
         isCreatable = false,
         isGroupHeadingSelectable = false,
@@ -240,11 +240,17 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         [error, selectSize, menuSize, variant, isGroupHeadingSelectable, shouldMenuAlignRight],
     )
 
-    // Used to show the create new option for creatable select
-    const isValidNewOption = (inputValue: string) =>
-        isCreatable &&
-        !!inputValue?.trim() &&
-        !getSelectPickerOptionByValue(value as SelectPickerOptionType<OptionValue>[], inputValue.trim(), null)
+    // Used to show the create new option for creatable select and the option(s) doesn't have the input value
+    const isValidNewOption = (inputValue: string) => {
+        const trimmedInput = inputValue?.trim()
+
+        return (
+            isCreatable &&
+            !!trimmedInput &&
+            !getSelectPickerOptionByValue(value as SelectPickerOptionType<OptionValue>[], trimmedInput, null) &&
+            !getSelectPickerOptionByValue(options, trimmedInput, null)
+        )
+    }
 
     const renderControl = useCallback(
         (controlProps: ControlProps<SelectPickerOptionType<OptionValue>>) => (

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -341,7 +341,11 @@ export const getSelectPickerOptionByValue = <OptionValue>(
     value: string | number,
     defaultOption: SelectPickerOptionType<OptionValue> = { label: '', value: '' as unknown as OptionValue },
 ): SelectPickerOptionType<OptionValue> => {
-    const foundOption = (optionsList ?? []).reduce(
+    if (!Array.isArray(optionsList)) {
+        return defaultOption
+    }
+
+    const foundOption = optionsList.reduce(
         (acc, curr) => {
             if (!acc.notFound) return acc