Set focus on field after clear.

SU-SWS · Oct 23, 2024 · ceb5d95 · ceb5d95
1 parent 3ff09bf
commit ceb5d95
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/search/Modal/SearchFieldModal.jsx b/src/components/search/Modal/SearchFieldModal.jsx
@@ -27,7 +27,7 @@ const SearchFieldModal = React.forwardRef(({ emptySearchMessage }, ref) => {
   const debouncedInputValue = useDebouncedValue(inputValue);
   const [options, setOptions] = useState([]);
   const [showEmptyMessage, setShowEmptyMessage] = useState(false);
-  const { close } = useContext(SearchModalContext);
+  const { close, modalSearchInputRef } = useContext(SearchModalContext);
 
   // Debounce the input value and fetch options.
   // -------------------------------------------
@@ -103,7 +103,8 @@ const SearchFieldModal = React.forwardRef(({ emptySearchMessage }, ref) => {
   const handleClear = useCallback(() => {
     setInputValue('');
     setValue('');
-  }, [setInputValue, setValue]);
+    modalSearchInputRef.current.focus();
+  }, [setInputValue, setValue, modalSearchInputRef]);
 
   // Render the search field.
   // ------------------------

diff --git a/src/components/search/SearchField.jsx b/src/components/search/SearchField.jsx
@@ -107,7 +107,8 @@ const SearchField = ({ emptySearchMessage }) => {
     setInputValue('');
     setValue('');
     refine('');
-  }, [setInputValue, setValue, refine]);
+    searchInputRef.current.focus();
+  }, [setInputValue, setValue, refine, searchInputRef]);
 
   // The search field component.
   // ---------------------------