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

deriv-com · Aug 22, 2024 · 87095e3 · 87095e3
1 parent b5c358b
commit 87095e3
Show file tree

Hide file tree

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