diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx index 37fdbbfe63fc..dd0988534d03 100644 --- a/components/table/__tests__/Table.filter.test.tsx +++ b/components/table/__tests__/Table.filter.test.tsx @@ -68,6 +68,16 @@ describe('Table.filter', () => { return namesList; } + // Seems raf not trigger when in useEffect for async update + // Need trigger multiple times + function refreshTimer() { + for (let i = 0; i < 3; i += 1) { + act(() => { + jest.runAllTimers(); + }); + } + } + beforeEach(() => { jest.useFakeTimers(); }); @@ -657,16 +667,6 @@ describe('Table.filter', () => { return container.querySelector('.ant-table-filter-dropdown'); } - // Seems raf not trigger when in useEffect for async update - // Need trigger multiple times - function refreshTimer() { - for (let i = 0; i < 3; i += 1) { - act(() => { - jest.runAllTimers(); - }); - } - } - // Open Level2 fireEvent.mouseEnter( getFilterMenu()?.querySelectorAll('div.ant-dropdown-menu-submenu-title')[0]!, @@ -1493,6 +1493,47 @@ describe('Table.filter', () => { ).toBeTruthy(); }); + it('filtered should work after change', () => { + const App = () => { + const [filtered, setFiltered] = React.useState(true); + const columns = [ + { + title: 'Name', + dataIndex: 'name', + filtered, + filters: [], + }, + ]; + + return ( +
+ + + + ); + }; + const { container } = render(); + + expect( + container.querySelector('.ant-table-filter-trigger')?.className.includes('active'), + ).toBeTruthy(); + + fireEvent.click(container.querySelector('#change-filtered-btn')!); + + refreshTimer(); + + expect( + container.querySelector('.ant-table-filter-trigger')?.className.includes('active'), + ).toBeFalsy(); + }); + it('filteredValue with empty array should not active the filtered icon', () => { const { container } = render( createTable({ @@ -1985,15 +2026,6 @@ describe('Table.filter', () => { function getFilterMenu() { return container.querySelector('.ant-table-filter-dropdown'); } - // Seems raf not trigger when in useEffect for async update - // Need trigger multiple times - function refreshTimer() { - for (let i = 0; i < 3; i += 1) { - act(() => { - jest.runAllTimers(); - }); - } - } const items = getFilterMenu()?.querySelectorAll('li.ant-dropdown-menu-item'); fireEvent.click(items?.[0]!); diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx index 5eca7affa79d..2bc874b02be0 100644 --- a/components/table/hooks/useFilter/index.tsx +++ b/components/table/hooks/useFilter/index.tsx @@ -230,7 +230,20 @@ function useFilter({ const keyList = (mergedColumns || []).map((column, index) => getColumnKey(column, getColumnPos(index)), ); - return filterStates.filter(({ key }) => keyList.includes(key)); + return filterStates + .filter(({ key }) => keyList.includes(key)) + .map((item) => { + const col = mergedColumns[keyList.findIndex((key) => key === item.key)]; + const nweItem = { + ...item, + column: { + ...item.column, + ...col, + }, + forceFiltered: col.filtered, + }; + return nweItem; + }); } warning(