diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 45e81a1dfd..e748e355d4 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -123,6 +123,15 @@ describe('Table.filter', () => { clearFilters()} id="reset"> Reset + { + setSelectedKeys([43]); + confirm(); + }} + id="simulateOnSelect" + > + SimulateOnSelect + ); @@ -170,6 +179,11 @@ describe('Table.filter', () => { .first() .props().visible, ).toBeFalsy(); + + // Simulate onSelect, setSelectedKeys & confirm + wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + wrapper.find('#simulateOnSelect').simulate('click'); + expect(getFilterMenu().props().filterState.filteredKeys).toEqual([43]); }); it('can be controlled by filterDropdownVisible', () => { diff --git a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap index 6dc8696ca2..05a0d802e8 100644 --- a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap +++ b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap @@ -23,6 +23,12 @@ exports[`Table.filter override custom filter correctly 1`] = ` > Reset + + SimulateOnSelect + `; diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index 61f795d996..75ed0c0307 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -9,6 +9,7 @@ import Dropdown from '../../../dropdown'; import { ColumnType, ColumnFilterItem, Key, TableLocale, GetPopupContainer } from '../../interface'; import FilterDropdownMenuWrapper from './FilterWrapper'; import { FilterState } from '.'; +import useSyncState from '../useSyncState'; const { SubMenu, Item: MenuItem } = Menu; @@ -91,21 +92,21 @@ function FilterDropdown(props: FilterDropdownProps) { const [propFilteredKeys, setPropFilteredKeys] = React.useState( filterState && filterState.filteredKeys, ); - const [filteredKeys, setFilteredKeys] = React.useState(propFilteredKeys || []); + const [getFilteredKeysSync, setFilteredKeysSync] = useSyncState(propFilteredKeys || []); + + const onSelectKeys = ({ selectedKeys }: { selectedKeys: Key[] }) => { + setFilteredKeysSync(selectedKeys); + }; React.useEffect(() => { // Sync internal filtered keys when props key changed const newFilteredKeys = filterState && filterState.filteredKeys; if (!shallowEqual(propFilteredKeys, newFilteredKeys)) { setPropFilteredKeys(newFilteredKeys); - setFilteredKeys(newFilteredKeys || []); + onSelectKeys({ selectedKeys: newFilteredKeys || [] }); } }, [filterState]); - const onSelectKeys = ({ selectedKeys }: { selectedKeys: Key[] }) => { - setFilteredKeys(selectedKeys); - }; - // ====================== Open Keys ====================== const [openKeys, setOpenKeys] = React.useState([]); const openRef = React.useRef(); @@ -140,7 +141,7 @@ function FilterDropdown(props: FilterDropdownProps) { }; const onConfirm = () => { - internalTriggerFilter(filteredKeys); + internalTriggerFilter(getFilteredKeysSync()); }; const onReset = () => { @@ -167,7 +168,7 @@ function FilterDropdown(props: FilterDropdownProps) { dropdownContent = column.filterDropdown({ prefixCls: `${dropdownPrefixCls}-custom`, setSelectedKeys: (selectedKeys: Key[]) => onSelectKeys({ selectedKeys }), - selectedKeys: filteredKeys, + selectedKeys: getFilteredKeysSync(), confirm: onConfirm, clearFilters: onReset, filters: column.filters, @@ -185,12 +186,12 @@ function FilterDropdown(props: FilterDropdownProps) { onClick={onMenuClick} onSelect={onSelectKeys} onDeselect={onSelectKeys} - selectedKeys={(filteredKeys || []) as any} + selectedKeys={(getFilteredKeysSync() || []) as any} getPopupContainer={getPopupContainer} openKeys={openKeys} onOpenChange={onOpenChange} > - {renderFilterItems(column.filters!, prefixCls, filteredKeys, filterMultiple)} + {renderFilterItems(column.filters!, prefixCls, getFilteredKeysSync(), filterMultiple)}