feat(Select): add filter prop

src/components/Select/Select.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 
 import {KeyCode} from '../../constants';
-import {useFocusWithin, useForkRef, useSelect, useUniqId} from '../../hooks';
+import {useControlledState, useFocusWithin, useForkRef, useSelect, useUniqId} from '../../hooks';
 import type {List} from '../List';
 import {OuterAdditionalContent} from '../controls/common/OuterAdditionalContent/OuterAdditionalContent';
 import {errorPropsMapper} from '../controls/utils';
@@ -21,7 +21,6 @@ import {
 import {DEFAULT_VIRTUALIZATION_THRESHOLD, selectBlock} from './constants';
 import {useQuickSearch} from './hooks';
 import {getSelectFilteredOptions, useSelectOptions} from './hooks-public';
-import {initialState, reducer} from './store';
 import {Option, OptionGroup} from './tech-components';
 import type {SelectProps, SelectRenderPopup} from './types';
 import type {SelectFilterRef} from './types-misc';
@@ -93,6 +92,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         multiple = false,
         disabled = false,
         filterable = false,
+        filter: propsFilter,
         disablePortal,
         hasClear = false,
         onClose,
@@ -102,7 +102,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         title,
     } = props;
     const mobile = useMobile();
-    const [{filter}, dispatch] = React.useReducer(reducer, initialState);
+    const [filter, setFilter] = useControlledState(propsFilter, '', onFilterChange);
     // to avoid problem with incorrect popper offset calculation
     // for example: https://github.com/radix-ui/primitives/issues/1567
     const controlWrapRef = React.useRef<HTMLDivElement>(null);
@@ -111,28 +111,6 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
     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) {
-                // FIXME: rework after https://github.com/gravity-ui/uikit/issues/1354
-                setTimeout(() => {
-                    handleFilterChange('');
-                }, 100);
-            }
-        },
-        [filterable, onOpenChange, handleFilterChange],
-    );
-
     const {
         value,
         open,
@@ -150,9 +128,18 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         multiple,
         open: propsOpen,
         onClose,
-        onOpenChange: handleOpenChange,
+        onOpenChange,
     });
 
+    React.useEffect(() => {
+        if (!open && filterable && mobile) {
+            // FIXME: add handlers to Sheet like in https://github.com/gravity-ui/uikit/issues/1354
+            setTimeout(() => {
+                setFilter('');
+            }, 300);
+        }
+    }, [open, filterable, setFilter, mobile]);
+
     const propsOptions = props.options || getOptionsFromChildren(props.children);
     const options = useSelectOptions({
         options: propsOptions,
@@ -283,7 +270,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                     size={size}
                     value={filter}
                     placeholder={filterPlaceholder}
-                    onChange={handleFilterChange}
+                    onChange={setFilter}
                     onKeyDown={handleFilterKeyDown}
                     renderFilter={renderFilter}
                 />
@@ -369,6 +356,13 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
                 virtualized={virtualized}
                 mobile={mobile}
                 placement={popupPlacement}
+                onAfterClose={
+                    filterable
+                        ? () => {
+                              setFilter('');
+                          }
+                        : undefined
+                }
             >
                 {renderPopup({renderFilter: _renderFilter, renderList: _renderList})}
             </SelectPopup>

src/components/Select/__tests__/Select.filter.test.tsx

@@ -2,14 +2,15 @@ import React from 'react';
 
 import userEvent from '@testing-library/user-event';
 
-import {cleanup} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../test-utils/utils';
 import {TextInput} from '../../controls';
+import {MobileProvider} from '../../mobile';
+import {Select} from '../Select';
 import type {SelectOption, SelectProps, SelectRenderPopup} from '../types';
 
-import {TEST_QA, generateOptions, generateOptionsGroups, setup} from './utils';
+import {TEST_QA, generateOptions, generateOptionsGroups, setup, timeout} from './utils';
 
 afterEach(() => {
-    cleanup();
     jest.clearAllMocks();
 });
 
@@ -127,4 +128,68 @@ describe('Select filter', () => {
         await user.keyboard('definitely not option');
         expect(queryAllByRole('option').length).toBe(0);
     });
+
+    test('should not clear filter onClose if open is true', async () => {
+        const onClose = jest.fn();
+        render(
+            <MobileProvider mobile>
+                <Select
+                    open
+                    filterable
+                    onFilterChange={onFilterChange}
+                    onClose={onClose}
+                    qa="select"
+                    filterPlaceholder="filter"
+                >
+                    <Select.Option value="one">One</Select.Option>
+                    <Select.Option value="two">Two</Select.Option>
+                    <Select.Option value="three">Three</Select.Option>
+                </Select>
+            </MobileProvider>,
+        );
+
+        await userEvent.click(screen.getByPlaceholderText('filter'));
+        await userEvent.keyboard('test');
+
+        expect(onFilterChange).toHaveBeenCalledTimes(4);
+        onFilterChange.mockClear();
+
+        await userEvent.click(document.body);
+        await timeout(400);
+
+        expect(onClose).toHaveBeenCalledTimes(1);
+        expect(onFilterChange).toHaveBeenCalledTimes(0);
+    });
+
+    test('should not clear filter onClose', async () => {
+        const onClose = jest.fn();
+        render(
+            <MobileProvider mobile>
+                <Select
+                    defaultOpen={true}
+                    filterable
+                    onFilterChange={onFilterChange}
+                    onClose={onClose}
+                    qa="select"
+                    filterPlaceholder="filter"
+                >
+                    <Select.Option value="one">One</Select.Option>
+                    <Select.Option value="two">Two</Select.Option>
+                    <Select.Option value="three">Three</Select.Option>
+                </Select>
+            </MobileProvider>,
+        );
+
+        await userEvent.click(screen.getByPlaceholderText('filter'));
+        await userEvent.keyboard('test');
+
+        expect(onFilterChange).toHaveBeenCalledTimes(4);
+        onFilterChange.mockClear();
+
+        await userEvent.click(document.body);
+        await timeout(400);
+
+        expect(onClose).toHaveBeenCalledTimes(1);
+        expect(onFilterChange).toHaveBeenCalledTimes(1);
+    });
 });

src/components/Select/components/SelectPopup/SelectPopup.tsx

@@ -21,6 +21,7 @@ export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
     (
         {
             handleClose,
+            onAfterClose,
             width,
             open,
             placement = DEFAULT_PLACEMENT,
@@ -57,6 +58,7 @@ export const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
                 restoreFocusRef={controlRef}
                 modifiers={getModifiers({width, disablePortal, virtualized})}
                 id={id}
+                onTransitionExited={onAfterClose}
             >
                 {children}
             </Popup>

src/components/Select/components/SelectPopup/types.ts

@@ -15,4 +15,5 @@ export type SelectPopupProps = {
     disablePortal?: boolean;
     virtualized?: boolean;
     id?: string;
+    onAfterClose?: () => void;
 };

src/components/Select/types.ts

@@ -60,7 +60,6 @@ export type SelectRenderCounter = (
 export type SelectProps<T = any> = QAProps &
     UseOpenProps & {
         onUpdate?: (value: string[]) => void;
-        onFilterChange?: (filter: string) => void;
         renderControl?: SelectRenderControl;
         renderFilter?: (props: {
             onChange: (filter: string) => void;
@@ -106,6 +105,8 @@ export type SelectProps<T = any> = QAProps &
         validationState?: 'invalid';
         multiple?: boolean;
         filterable?: boolean;
+        filter?: string;
+        onFilterChange?: (filter: string) => void;
         disablePortal?: boolean;
         hasClear?: boolean;
         onFocus?: (e: React.FocusEvent) => void;

src/hooks/useSelect/useOpenState.ts

@@ -5,25 +5,29 @@ import {useControlledState} from '../useControlledState/useControlledState';
 import type {UseOpenProps} from './types';
 
 export const useOpenState = (props: UseOpenProps) => {
+    const {onOpenChange, onClose} = props;
+    const handleOpenChange = React.useCallback(
+        (newOpen: boolean) => {
+            onOpenChange?.(newOpen);
+            if (newOpen === false && onClose) {
+                onClose();
+            }
+        },
+        [onOpenChange, onClose],
+    );
+
     const [open, setOpenState] = useControlledState(
         props.open,
         props.defaultOpen ?? false,
-        props.onOpenChange,
+        handleOpenChange,
     );
 
-    const {onClose} = props;
     const toggleOpen = React.useCallback(
         (val?: boolean) => {
             const newOpen = typeof val === 'boolean' ? val : !open;
-            if (newOpen !== open) {
-                setOpenState(newOpen);
-            }
-
-            if (newOpen === false && onClose) {
-                onClose();
-            }
+            setOpenState(newOpen);
         },
-        [open, setOpenState, onClose],
+        [open, setOpenState],
     );
 
     return {