fix(react): focus search field on clear

p3ol · Jan 2, 2023 · d8e5b24 · d8e5b24
1 parent d8f5206
commit d8e5b24
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/react/lib/SelectField/index.js b/packages/react/lib/SelectField/index.js
@@ -105,6 +105,12 @@ const SelectField = forwardRef(({
     dispatch({ placeholderSize: Math.max(10, placeholder?.length ?? 0) });
   }, [placeholder]);
 
+  useEffect(() => {
+    if ((multiple || !state.value) && state.dirty && searchable) {
+      searchInputRef.current?.focus?.();
+    }
+  }, [state.value]);
+
   useTimeout(() => {
     if (state.search.length >= searchMinCharacters) {
       onSearchResults();

diff --git a/packages/react/lib/SelectField/index.test.js.snap b/packages/react/lib/SelectField/index.test.js.snap
@@ -180,7 +180,7 @@ exports[`<SelectField /> should allow to clear a single value 1`] = `
 exports[`<SelectField /> should allow to clear a single value 2`] = `
 <div>
   <div
-    class="junipero dropdown select-field dirty valid searchable empty"
+    class="junipero dropdown select-field dirty valid searchable empty focused"
   >
     <div
       class="field dropdown-toggle"