diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 8ff849cf7d..39c7d12e1c 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -1104,4 +1104,71 @@ describe('Table.filter', () => { mount(); }); + + // https://github.com/ant-design/ant-design/issues/20854 + it('Not cache for onChange state', () => { + const onChange = jest.fn(); + + const wrapper = mount( + , + ); + + // Sort it + wrapper.find('.ant-table-column-sorters').simulate('click'); + expect(onChange).toHaveBeenCalledWith( + expect.anything(), + { + gender: null, + }, + expect.objectContaining({ + column: { + dataIndex: 'name', + sorter: true, + title: 'Name', + }, + }), + expect.anything(), + ); + + // Filter it + onChange.mockReset(); + wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + wrapper + .find('.ant-dropdown-menu-item') + .first() + .simulate('click'); + wrapper.find('.ant-table-filter-dropdown-link.confirm').simulate('click'); + expect(onChange).toHaveBeenCalledWith( + expect.anything(), + { + gender: ['male'], + }, + expect.objectContaining({ + column: { + dataIndex: 'name', + sorter: true, + title: 'Name', + }, + }), + expect.anything(), + ); + }); }); diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx index 874b8fac8b..5dc0e7e0ac 100644 --- a/components/table/hooks/useFilter/index.tsx +++ b/components/table/hooks/useFilter/index.tsx @@ -208,18 +208,16 @@ function useFilter({ onFilterChange(generateFilterInfo(newFilterStates), newFilterStates); }; - const transformColumns = React.useMemo(() => { - return (innerColumns: ColumnsType) => - injectFilter( - prefixCls, - dropdownPrefixCls, - innerColumns, - mergedFilterStates, - triggerFilter, - getPopupContainer, - tableLocale, - ); - }, [mergedFilterStates]); + const transformColumns = (innerColumns: ColumnsType) => + injectFilter( + prefixCls, + dropdownPrefixCls, + innerColumns, + mergedFilterStates, + triggerFilter, + getPopupContainer, + tableLocale, + ); return [transformColumns, mergedFilterStates, getFilters]; } diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx index 689e96a173..cde513ce57 100644 --- a/components/table/hooks/useSorter.tsx +++ b/components/table/hooks/useSorter.tsx @@ -362,11 +362,8 @@ export default function useFilterSorter({ onSorterChange(generateSorterInfo(newSorterStates), newSorterStates); } - const transformColumns = React.useCallback( - (innerColumns: ColumnsType) => - injectSorter(prefixCls, innerColumns, mergedSorterStates, triggerSorter, sortDirections), - [mergedSorterStates], - ); + const transformColumns = (innerColumns: ColumnsType) => + injectSorter(prefixCls, innerColumns, mergedSorterStates, triggerSorter, sortDirections); const getSorters = () => { return generateSorterInfo(mergedSorterStates);