fix: 🐛 Table unchanged filter should not trigger onChange

ref https://github.com/ant-design/ant-design/issues/22819#issuecomment-607171024

components/table/__tests__/Table.filter.test.js

@@ -11,12 +11,7 @@ import ConfigProvider from '../../config-provider';
 const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } };
 
 function getDropdownWrapper(wrapper) {
-  return mount(
+  return mount(wrapper.find('Trigger').instance().getComponent());
-    wrapper
-      .find('Trigger')
-      .instance()
-      .getComponent(),
-  );
 }
 
 describe('Table.filter', () => {
@@ -213,7 +208,10 @@ describe('Table.filter', () => {
 
     expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toBeFalsy();
     wrapper.find('FilterDropdown').find('input[type="checkbox"]').first().simulate('click');
-    wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+    wrapper
+      .find('FilterDropdown')
+      .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
+      .simulate('click');
     expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
     wrapper.setProps({ dataSource: [...data, { key: 999, name: 'Chris' }] });
     expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
@@ -342,7 +340,10 @@ describe('Table.filter', () => {
     const wrapper = mount(createTable({ onChange: handleChange }));
     wrapper.find('.ant-dropdown-trigger').first().simulate('click');
     wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click');
-    wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+    wrapper
+      .find('FilterDropdown')
+      .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
+      .simulate('click');
     expect(handleChange).toHaveBeenCalledWith(
       {},
       { name: ['boy'] },
@@ -358,12 +359,15 @@ describe('Table.filter', () => {
     const wrapper = mount(createTable({ pagination: { onChange: onPaginationChange } }));
     wrapper.find('.ant-dropdown-trigger').first().simulate('click');
     wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click');
-    wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+    wrapper
+      .find('FilterDropdown')
+      .find('.ant-table-filter-dropdown-btns .ant-btn-primary')
+      .simulate('click');
 
     expect(onPaginationChange).toHaveBeenCalledWith(1, 10);
   });
 
-  it('should not fire change event on close filterDropdown without changing anything', () => {
+  it('should not fire change event when close filterDropdown without changing anything', () => {
     const handleChange = jest.fn();
     const wrapper = mount(createTable({ onChange: handleChange }));
 
@@ -373,6 +377,26 @@ describe('Table.filter', () => {
     expect(handleChange).not.toHaveBeenCalled();
   });
 
+  it('should not fire change event when close a filtered filterDropdown without changing anything', () => {
+    const handleChange = jest.fn();
+    const wrapper = mount(
+      createTable({
+        onChange: handleChange,
+        columns: [
+          {
+            ...column,
+            defaultFilteredValue: ['boy', 'designer'],
+          },
+        ],
+      }),
+    );
+
+    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
+    wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
+
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
   it('three levels menu', () => {
     const filters = [
       { text: 'Upper', value: 'Upper' },
@@ -410,29 +434,17 @@ describe('Table.filter', () => {
     let dropdownWrapper = getDropdownWrapper(wrapper);
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
     // select
-    dropdownWrapper
+    dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(0).simulate('mouseEnter');
-      .find('.ant-dropdown-menu-submenu-title')
-      .at(0)
-      .simulate('mouseEnter');
     jest.runAllTimers();
     dropdownWrapper = getDropdownWrapper(wrapper);
-    dropdownWrapper
+    dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(1).simulate('mouseEnter');
-      .find('.ant-dropdown-menu-submenu-title')
-      .at(1)
-      .simulate('mouseEnter');
     jest.runAllTimers();
     dropdownWrapper = getDropdownWrapper(wrapper);
-    dropdownWrapper
+    dropdownWrapper.find('MenuItem').last().simulate('click');
-      .find('MenuItem')
-      .last()
-      .simulate('click');
     dropdownWrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
     wrapper.update();
     expect(renderedNames(wrapper)).toEqual(['Jack']);
-    dropdownWrapper
+    dropdownWrapper.find('MenuItem').last().simulate('click');
-      .find('MenuItem')
-      .last()
-      .simulate('click');
     jest.useRealTimers();
   });
 
@@ -1060,12 +1072,9 @@ describe('Table.filter', () => {
     expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').text()).toEqual(
       'Bamboo',
     );
-    expect(
+    expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').last().text()).toEqual(
-      wrapper
+      'Reset',
-        .find('.ant-table-filter-dropdown-btns .ant-btn-link')
+    );
-        .last()
-        .text(),
-    ).toEqual('Reset');
   });
 
   it('filtered should work', () => {

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
 import FilterFilled from '@ant-design/icons/FilterFilled';
 import Button from '../../../button';
 import Menu from '../../../menu';
@@ -131,6 +132,10 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
       return null;
     }
 
+    if (isEqual(mergedKeys, filterState?.filteredKeys)) {
+      return null;
+    }
+
     triggerFilter({
       column,
       key: columnKey,