fix(Select): do not call onFilterChange on mount (#1326)

gravity-ui · Feb 8, 2024 · 64e5860 · 64e5860
1 parent 6a4f678
commit 64e5860
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -98,6 +98,26 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
     const filterRef = React.useRef<SelectFilterRef>(null);
     const listRef = React.useRef<List<FlattenOption>>(null);
     const handleControlRef = useForkRef(ref, controlRef);
+
+    const handleFilterChange = React.useCallback(
+        (nextFilter: string) => {
+            onFilterChange?.(nextFilter);
+            dispatch({type: 'SET_FILTER', payload: {filter: nextFilter}});
+        },
+        [onFilterChange],
+    );
+
+    const handleOpenChange = React.useCallback(
+        (open: boolean) => {
+            onOpenChange?.(open);
+
+            if (!open && filterable) {
+                handleFilterChange('');
+            }
+        },
+        [filterable, onOpenChange, handleFilterChange],
+    );
+
     const {
         value,
         open,
@@ -114,7 +134,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         multiple,
         open: propsOpen,
         onClose,
-        onOpenChange,
+        onOpenChange: handleOpenChange,
     });
     const uniqId = useUniqId();
     const selectId = id ?? uniqId;
@@ -197,14 +217,6 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         listRef?.current?.onKeyDown(e);
     }, []);
 
-    const handleFilterChange = React.useCallback(
-        (nextFilter: string) => {
-            onFilterChange?.(nextFilter);
-            dispatch({type: 'SET_FILTER', payload: {filter: nextFilter}});
-        },
-        [onFilterChange],
-    );
-
     const handleQuickSearchChange = React.useCallback((search: string) => {
         if (search) {
             const itemIndex = findItemIndexByQuickSearch(search, getListItems(listRef));
@@ -228,10 +240,8 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
             if (filterable) {
                 filterRef.current?.focus();
             }
-        } else {
-            handleFilterChange('');
         }
-    }, [open, filterable, handleFilterChange]);
+    }, [open, filterable]);
 
     const mods: CnMods = {
         ...(width === 'max' && {width}),

diff --git a/src/components/Select/__tests__/Select.filter.test.tsx b/src/components/Select/__tests__/Select.filter.test.tsx
@@ -68,7 +68,7 @@ describe('Select filter', () => {
         await user.keyboard('1');
         // empty
         expect(queryAllByRole('option').length).toBe(0);
-        expect(onFilterChange).toBeCalledTimes(4);
+        expect(onFilterChange).toBeCalledTimes(3);
     });
 
     test('should render node with renderEmptyOptions', async () => {