diff --git a/lib/components/Input/dropdown-field/index.tsx b/lib/components/Input/dropdown-field/index.tsx index 2382dac7..26c6b8a4 100644 --- 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( disabled, label, options, + defaultOption, textAlignment = "left", inputSize = "md", status = "neutral", @@ -41,7 +43,7 @@ export const InputDropdown = forwardRef( const [items, setItems] = useState(options); const [shouldFilterList, setShouldFilterList] = useState(false); const [selectedItem, setSelectedItem] = useState( - null, + defaultOption ?? null, ); const [isAnimating, setIsAnimating] = useState(false); @@ -60,8 +62,7 @@ export const InputDropdown = forwardRef( 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( (option) => option.value === value, ); defaultItem && setSelectedItem(defaultItem); + } else if (defaultOption) { + setSelectedItem(defaultOption); } - }, [options]); + }, [options, value, defaultOption]); return (
@@ -133,7 +136,7 @@ export const InputDropdown = forwardRef( onKeyDown={() => setShouldFilterList(true)} readOnly={!isAutocomplete} type="select" - value={value} + value={selectedItem?.value} {...getInputProps()} {...rest} />