fix(react): only refocus selectfield on clear

p3ol · Jan 3, 2023 · 5d1edf2 · 5d1edf2
1 parent 88d327b
commit 5d1edf2
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/packages/react/lib/SelectField/index.js b/packages/react/lib/SelectField/index.js
@@ -109,11 +109,18 @@ const SelectField = forwardRef(({
     dispatch({ placeholderSize: Math.max(10, placeholder?.length ?? 0) });
   }, [placeholder]);
 
-  useEffect(() => {
+  useTimeout(() => {
     if ((multiple || !state.value) && state.dirty && searchable) {
       searchInputRef.current?.focus?.();
+      dispatch({ refocus: false });
     }
-  }, [state.value]);
+  }, 1, [
+    state.refocus,
+    state.value,
+    state.dirty,
+    searchable,
+    multiple,
+  ], { enabled: state.refocus });
 
   useTimeout(() => {
     if (state.search.length >= searchMinCharacters) {
@@ -123,7 +130,7 @@ const SelectField = forwardRef(({
     }
   }, searchThreshold, [state.search]);
 
-  const onChange_ = ({ close = true, resetSearch = false } = {}) => {
+  const onChange_ = ({ close = true, resetSearch, refocus } = {}) => {
     if (disabled) {
       return;
     }
@@ -134,6 +141,7 @@ const SelectField = forwardRef(({
       dirty: true,
       selectedItem: -1,
       ...resetSearch && { search: '', searchResults: null },
+      ...refocus && { refocus: true },
     });
     onChange?.({ value: parseValue(state.value), valid: state.valid });
     updateControl?.({ valid: state.valid, dirty: true });
@@ -182,7 +190,7 @@ const SelectField = forwardRef(({
 
     state.valid = onValidate(parseValue(state.value), { required, multiple });
 
-    onChange_({ close: false, resetSearch: true });
+    onChange_({ close: false, resetSearch: true, refocus: true });
   };
 
   const onSearchInputChange = e => {