fix: Table filterDropdown confirm closeDropdown (#30457)

* fix: Table filterDropdown confirm closeDropdown close #30454 * add test case * improve demo
ant-design · May 10, 2021 · dd14752 · dd14752
1 parent b2a35f0
commit dd14752
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
@@ -1513,6 +1513,7 @@ describe('Table.filter', () => {
 
     expect(wrapper.find('.ant-table-filter-column')).toHaveLength(3);
   });
+
   it('should pagination.current be 1 after filtering', () => {
     const onChange = jest.fn();
     const columns = [
@@ -1562,4 +1563,46 @@ describe('Table.filter', () => {
     wrapper.find('.ant-btn-primary').first().simulate('click');
     expect(onChange.mock.calls[1][0].current).toBe(1);
   });
+
+  // https://github.com/ant-design/ant-design/issues/30454
+  it('should not trigger onFilterDropdownVisibleChange when call confirm({ closeDropdown: false })', () => {
+    const onFilterDropdownVisibleChange = jest.fn();
+    const wrapper = mount(
+      createTable({
+        columns: [
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            filteredValue: name,
+            filterDropdown: ({ confirm }) => (
+              <>
+                <button id="confirm-and-close" type="button" onClick={() => confirm()}>
+                  confirm
+                </button>
+                <button
+                  id="confirm-only"
+                  type="button"
+                  onClick={() => confirm({ closeDropdown: false })}
+                >
+                  confirm
+                </button>
+              </>
+            ),
+            onFilterDropdownVisibleChange,
+          },
+        ],
+      }),
+    );
+
+    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
+    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1);
+
+    wrapper.find('#confirm-only').simulate('click');
+    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1);
+
+    wrapper.find('#confirm-and-close').simulate('click');
+    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(2);
+    expect(onFilterDropdownVisibleChange).toHaveBeenLastCalledWith(false);
+  });
 });
diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
@@ -64,7 +64,7 @@ class App extends React.Component {
           value={selectedKeys[0]}
           onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
-          style={{ width: 188, marginBottom: 8, display: 'block' }}
+          style={{ marginBottom: 8, display: 'block' }}
         />
         <Space>
           <Button

diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -8,14 +8,7 @@ import Checkbox from '../../../checkbox';
 import Radio from '../../../radio';
 import Dropdown from '../../../dropdown';
 import Empty from '../../../empty';
-import {
-  ColumnType,
-  ColumnFilterItem,
-  Key,
-  TableLocale,
-  GetPopupContainer,
-  FilterConfirmProps,
-} from '../../interface';
+import { ColumnType, ColumnFilterItem, Key, TableLocale, GetPopupContainer } from '../../interface';
 import FilterDropdownMenuWrapper from './FilterWrapper';
 import { FilterState } from '.';
 import useSyncState from '../../../_util/hooks/useSyncState';
@@ -192,8 +185,10 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     internalTriggerFilter([]);
   };
 
-  const doFilter = (param: FilterConfirmProps = { closeDropdown: true }) => {
-    triggerVisible(!param.closeDropdown);
+  const doFilter = ({ closeDropdown } = { closeDropdown: true }) => {
+    if (closeDropdown) {
+      triggerVisible(false);
+    }
     internalTriggerFilter(getFilteredKeysSync());
   };