fix: text erased on double click on searchable select component

affects: @medly-components/core, @medly-components/forms
medly · Aug 26, 2024 · 162030b · 162030b
1 parent 8f4d75c
commit 162030b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/packages/core/src/components/SingleSelect/SingleSelect.tsx b/packages/core/src/components/SingleSelect/SingleSelect.tsx
@@ -64,14 +64,15 @@ const Component: FC<SingleSelectProps> = memo(
                 isSearchable && setInputValue('');
                 inputRef.current?.focus();
             }, [isSearchable, inputValue]),
-            hideOptions = useCallback(() => {
+            hideOptions = useCallback((selected?: Option) => {
                 setOptionsVisibilityState(false);
                 inputRef.current?.blur();
+                selected && setInputValue(selected.label);
             }, []),
-            toggleOptions = useCallback(
-                () => !disabled && (areOptionsVisible ? hideOptions() : showOptions()),
-                [disabled, areOptionsVisible]
-            ),
+            toggleOptions = useCallback(() => {
+                const selected = getDefaultSelectedOption(defaultOptions, value);
+                return !disabled && (areOptionsVisible ? hideOptions(selected) : showOptions());
+            }, [disabled, areOptionsVisible, defaultOptions, value]),
             handleInputChange = useCallback(
                 (event: React.ChangeEvent<HTMLInputElement>) => {
                     const { value: inputValue } = event.target as HTMLInputElement,
@@ -91,8 +92,7 @@ const Component: FC<SingleSelectProps> = memo(
                     if (!option.disabled && !Array.isArray(option.value)) {
                         setSelectedOption(option);
                         setOptions(getUpdatedOptions(options, option));
-                        setInputValue(option.label);
-                        hideOptions();
+                        hideOptions(option);
                         isUnselectable && value === option.value ? onChange?.('') : onChange?.(option.value);
                         setErrorMessage('');
                     } else {
@@ -104,10 +104,9 @@ const Component: FC<SingleSelectProps> = memo(
             handleOuterClick = useCallback(() => {
                 isFocused.current = false;
                 if (areOptionsVisible) {
-                    hideOptions();
+                    hideOptions(defaultSelectedOption);
                     validate();
                     updateToDefaultOptions();
-                    setInputValue(defaultSelectedOption.label);
                 }
             }, [areOptionsVisible, selectedOption, updateToDefaultOptions, validate]),
             handleFocus = useCallback(

diff --git a/packages/core/src/components/SingleSelect/useKeyboardNavigation.tsx b/packages/core/src/components/SingleSelect/useKeyboardNavigation.tsx
@@ -12,7 +12,7 @@ type Props = {
     handleOptionClick: (op: Option) => void;
     showOptions: () => void;
     optionsRef: React.RefObject<HTMLUListElement>;
-    hideOptions?: () => void;
+    hideOptions?: (option?: Option) => void;
 };
 export const useKeyboardNavigation = (props: Props) => {
     const {
@@ -80,9 +80,9 @@ export const useKeyboardNavigation = (props: Props) => {
     useEffect(() => {
         if (isFocused.current && tabPress && optionsRef.current) {
             isFocused.current = false;
-            setTimeout(() => !isFocused.current && hideOptions && hideOptions(), 250);
+            setTimeout(() => !isFocused.current && hideOptions && hideOptions(selectedOption), 250);
         }
-    }, [tabPress]);
+    }, [tabPress, selectedOption]);
 
     useEffect(() => {
         if (isFocused.current && enterPress && optionsRef.current) {