diff --git a/src/components/Form/SingleSelect.tsx b/src/components/Form/SingleSelect.tsx index c35e6851..695715c6 100644 --- a/src/components/Form/SingleSelect.tsx +++ b/src/components/Form/SingleSelect.tsx @@ -110,7 +110,9 @@ function SingleSelect({ const handleSelect = (option: ISelectOption) => { if (option.disabled) return - const originalOption = optionsList.find((opt) => opt.value === option.value) + const originalOption = optionsList?.find( + (opt) => String(opt?.value) === String(option?.value) + ) setSelectedOption(originalOption || option) setIsOpen(false) @@ -118,21 +120,18 @@ function SingleSelect({ onChangeSelect?.(originalOption || option) } - const optionsWithSelected = optionsList.map((opt) => ({ + const optionsWithSelected = optionsList?.map((opt) => ({ ...opt, - selected: opt.value === value + selected: + String(opt?.value) === String(value) || + String(opt?.label).toLowerCase() === String(value).toLowerCase() })) const getInputLabel = () => { - let inputLabel = label - if (!isFilter && !selectedOption) return '' - if (!selectedOption) return inputLabel + if (!isFilter && !selectedOption) return placeholder || label || '' + if (!selectedOption) return placeholder || label || '' - return selectedOption.value === '' - ? inputLabel - : (inputLabel = - optionsList.find((opt) => opt.value === selectedOption.value) - ?.label || label) + return selectedOption.label || selectedOption.value.toString() } useEffect(() => { @@ -149,8 +148,19 @@ function SingleSelect({ }, []) useEffect(() => { - const found = optionsList.find((opt) => opt.value === value) - setSelectedOption(found || null) + const found = optionsList?.find( + (opt) => String(opt?.value) === String(value) + ) + + const foundByLabel = + !found && value + ? optionsList?.find( + (opt) => + String(opt?.label).toLowerCase() === String(value).toLowerCase() + ) + : null + + setSelectedOption(found || foundByLabel || null) }, [value, optionsList]) return ( @@ -224,9 +234,8 @@ function SingleSelect({ )} - {optionsWithSelected.map((option) => { + {optionsWithSelected?.map((option) => { const { value, label, disabled } = option - return (