fix: fix filtered update not working (#39883)

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 (
+        <div className="App">
+          <Button
+            id="change-filtered-btn"
+            onClick={() => {
+              setFiltered(!filtered);
+            }}
+          >
+            Set
+          </Button>
+          <Table columns={columns} dataSource={data} />
+        </div>
+      );
+    };
+    const { container } = render(<App />);
+
+    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]!);

components/table/hooks/useFilter/index.tsx

@@ -230,7 +230,20 @@ function useFilter<RecordType>({
       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(