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)}