🐛 Fix Table filterDropdown always trigger onChange

close #17833
ant-design · Jul 24, 2019 · ce7ab24 · ce7ab24
1 parent 22179f3
commit ce7ab24
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
@@ -621,6 +621,39 @@ describe('Table.filter', () => {
     expect(wrapper.find('.ant-input').instance().value).toBe('');
   });
 
+  // https://github.com/ant-design/ant-design/issues/17833
+  it('should not trigger onChange when bluring custom filterDropdown', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      createTable({
+        onChange,
+        columns: [
+          {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            filterDropdown: ({ setSelectedKeys }) => (
+              <input onChange={e => setSelectedKeys([e.target.value])} />
+            ),
+          },
+        ],
+      }),
+    );
+    wrapper
+      .find('.ant-dropdown-trigger')
+      .first()
+      .simulate('click');
+    wrapper
+      .find('input')
+      .first()
+      .simulate('change', { target: { value: 'whatevervalue' } });
+    wrapper
+      .find('.ant-dropdown-trigger')
+      .first()
+      .simulate('click');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   // https://github.com/ant-design/ant-design/issues/17089
   it('not crash when dynamic change filter', () => {
     const onChange = jest.fn();

diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
@@ -132,7 +132,7 @@ class App extends React.Component {
         ...this.getColumnSearchProps('address'),
       },
     ];
-    return <Table columns={columns} dataSource={data} onChange={this.onChange} />;
+    return <Table columns={columns} dataSource={data} />;
   }
 }
 

diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx
@@ -132,7 +132,9 @@ class FilterMenu<T> extends React.Component<FilterMenuProps<T>, FilterMenuState<
 
   onVisibleChange = (visible: boolean) => {
     this.setVisible(visible);
-    if (!visible) {
+    const { column } = this.props;
+    // https://github.com/ant-design/ant-design/issues/17833
+    if (!visible && !(column.filterDropdown instanceof Function)) {
       this.confirmFilter();
     }
   };