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(