fixes ant-design#10289 and ant-design#10209: lost of user selection o…

…n table data updates (ant-design#10332)

* fixes ant-design#10289 and ant-design#10209: lost of user selection on table data updates

* adds shallowequal check

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

@@ -106,6 +106,22 @@ describe('Table.filter', () => {
     expect(dropdown.props().visible).toBe(false);
   });
 
+  it('if the filter is visible it should ignore the selectedKeys changes', () => {
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        filterDropdownVisible: true,
+      }],
+    }));
+
+    const filterMenu = wrapper.find('FilterMenu').instance();
+    expect(filterMenu.state.selectedKeys).toEqual([]);
+    wrapper.find('FilterMenu').find('input[type="checkbox"]').first().simulate('click');
+    expect(filterMenu.state.selectedKeys).toEqual(['boy']);
+    wrapper.setProps({ dataSource: [...data, { key: 999, name: 'Chris' }] });
+    expect(filterMenu.state.selectedKeys).toEqual(['boy']);
+  });
+
   it('fires change event when visible change', () => {
     const handleChange = jest.fn();
     const wrapper = mount(createTable({

components/table/filterDropdown.tsx

@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom';
 import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
 import closest from 'dom-closest';
 import classNames from 'classnames';
+import shallowequal from 'shallowequal';
 import Dropdown from '../dropdown';
 import Icon from '../icon';
 import Checkbox from '../checkbox';
@@ -43,7 +44,15 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F
       selectedKeys: string[];
       visible: boolean;
     };
-    if ('selectedKeys' in nextProps) {
+
+    /**
+     * if the state is visible the component should ignore updates on selectedKeys prop to avoid
+     * that the user selection is lost
+     * this happens frequently when a table is connected on some sort of realtime data
+     * Fixes https://github.com/ant-design/ant-design/issues/10289 and
+     * https://github.com/ant-design/ant-design/issues/10209
+     */
+    if ('selectedKeys' in nextProps && !shallowequal(this.props.selectedKeys, nextProps.selectedKeys)) {
       newState.selectedKeys = nextProps.selectedKeys;
     }
     if ('filterDropdownVisible' in column) {