fix: Tree filter select all behavior

ref #34280
ant-design · Mar 4, 2022 · cb5e7a6 · cb5e7a6
1 parent 03d8556
commit cb5e7a6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
@@ -1964,6 +1964,34 @@ describe('Table.filter', () => {
       expect(wrapper.find('.ant-tree-checkbox').at(0).hasClass('ant-tree-checkbox-checked')).toBe(
         true,
       );
+      expect(wrapper.find('.ant-table-filter-dropdown-checkall .ant-checkbox').hasClass('ant-checkbox-indeterminate')).toBe(true);
+    });
+
+    it('select-all checkbox should change when all items are selected', () => {
+      jest.useFakeTimers();
+      jest.spyOn(console, 'error').mockImplementation(() => undefined);
+      const wrapper = mount(
+        createTable({
+          columns: [
+            {
+              ...column,
+              filterMode: 'tree',
+              filters: [
+                { text: 'Boy', value: 'boy' },
+                { text: 'Girl', value: 'girl' },
+              ],
+            },
+          ],
+        }),
+      );
+      wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
+      act(() => {
+        jest.runAllTimers();
+        wrapper.update();
+      });
+      wrapper.find('.ant-tree-node-content-wrapper').at(0).simulate('click');
+      wrapper.find('.ant-tree-node-content-wrapper').at(1).simulate('click');
+      expect(wrapper.find('.ant-table-filter-dropdown-checkall .ant-checkbox').hasClass('ant-checkbox-checked')).toBe(true);
     });
   });
 

diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -326,6 +326,11 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
             <div className={`${tablePrefixCls}-filter-dropdown-tree`}>
               {filterMultiple ? (
                 <Checkbox
+                  checked={selectedKeys.length === flattenKeys(column.filters).length}
+                  indeterminate={
+                    selectedKeys.length > 0 &&
+                    selectedKeys.length < flattenKeys(column.filters).length
+                  }
                   className={`${tablePrefixCls}-filter-dropdown-checkall`}
                   onChange={onCheckAll}
                 >