Revert "build: added default option for input dropdown (#383)" (#384)

This reverts commit 87095e3.
deriv-com · Aug 22, 2024 · 0e5b1e4 · 0e5b1e4
1 parent 87095e3
commit 0e5b1e4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/lib/components/Input/dropdown-field/dropdown.stories.tsx b/lib/components/Input/dropdown-field/dropdown.stories.tsx
@@ -100,11 +100,10 @@ export const DisabledDropdown: Story = {
         leftIcon: <LabelPairedPlaceholderSmRegularIcon />,
     },
 };
-export const DropdownWithDefaultOption: Story = {
+export const LabellessSuccessDropdown: Story = {
     args: {
         leftIcon: <LabelPairedPlaceholderSmRegularIcon />,
         status: "success",
-        defaultOption: { text: "Option 3", value: "option3" },
         rightIcon: <StandaloneCircleCheckBoldIcon iconSize="sm" />,
         variant: "outline",
     },

diff --git a/lib/components/Input/dropdown-field/index.tsx b/lib/components/Input/dropdown-field/index.tsx
@@ -16,7 +16,6 @@ export interface TDropdownProps extends InputProps {
     onSelectOption: (value: string) => void;
     isAutocomplete?: boolean;
     options: TOptionList[];
-    defaultOption?: TOptionList;
     listHeight?: string;
 }
 
@@ -26,7 +25,6 @@ export const InputDropdown = forwardRef<HTMLInputElement, TDropdownProps>(
             disabled,
             label,
             options,
-            defaultOption,
             textAlignment = "left",
             inputSize = "md",
             status = "neutral",
@@ -43,7 +41,7 @@ export const InputDropdown = forwardRef<HTMLInputElement, TDropdownProps>(
         const [items, setItems] = useState<TOptionList[]>(options);
         const [shouldFilterList, setShouldFilterList] = useState(false);
         const [selectedItem, setSelectedItem] = useState<TOptionList | null>(
-            defaultOption ?? null,
+            null,
         );
         const [isAnimating, setIsAnimating] = useState(false);
 
@@ -62,7 +60,8 @@ export const InputDropdown = forwardRef<HTMLInputElement, TDropdownProps>(
             openMenu,
             highlightedIndex,
         } = useCombobox({
-            defaultSelectedItem: defaultOption ?? null,
+            defaultSelectedItem:
+                options.find((item) => item.value === value) ?? null,
             items,
             itemToString(item) {
                 return item ? reactNodeToString(item.text) : "";
@@ -113,10 +112,8 @@ export const InputDropdown = forwardRef<HTMLInputElement, TDropdownProps>(
                     (option) => option.value === value,
                 );
                 defaultItem && setSelectedItem(defaultItem);
-            } else if (defaultOption) {
-                setSelectedItem(defaultOption);
             }
-        }, [options, value, defaultOption]);
+        }, [options]);
 
         return (
             <div className="dropdown__wrapper" {...getToggleButtonProps()}>
@@ -136,9 +133,7 @@ export const InputDropdown = forwardRef<HTMLInputElement, TDropdownProps>(
                     onKeyDown={() => setShouldFilterList(true)}
                     readOnly={!isAutocomplete}
                     type="select"
-                    value={
-                        selectedItem ? reactNodeToString(selectedItem.text) : ""
-                    }
+                    value={value}
                     {...getInputProps()}
                     {...rest}
                 />