feat(table): add filterOnClose prop for Column (#47451)

* feat(table): add `filterOnClose` prop for `Column`

* docs(table): add `filterOnClose` into `Column`'s API

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

@@ -2886,4 +2886,23 @@ describe('Table.filter', () => {
     // User opens filter Dropdown.
     fireEvent.click(container.querySelector('.ant-dropdown-trigger.ant-table-filter-trigger')!);
   });
+
+  it('should not fire change event when dropdown dismisses if filterOnClose is false', () => {
+    const handleChange = jest.fn();
+    const { container } = render(
+      createTable({
+        onChange: handleChange,
+        columns: [
+          {
+            ...column,
+            filterOnClose: false,
+          },
+        ],
+      }),
+    );
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]);
+    fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
 });

components/table/demo/head.md

@@ -1,6 +1,6 @@
 ## zh-CN
 
-对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
+对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选，`filterOnClose` 用于指定是否在筛选菜单关闭时触发筛选。
 
 使用 `defaultFilteredValue` 属性，设置列的默认筛选项。
 
@@ -14,7 +14,7 @@
 
 ## en-US
 
-Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection.
+Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection, `filterOnClose` to specify whether to trigger filter when the filter menu closes.
 
 Use `defaultFilteredValue` to make a column filtered by default.
 

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -124,6 +124,7 @@ export interface FilterDropdownProps<RecordType> {
   dropdownPrefixCls: string;
   column: ColumnType<RecordType>;
   filterState?: FilterState<RecordType>;
+  filterOnClose: boolean;
   filterMultiple: boolean;
   filterMode?: 'menu' | 'tree';
   filterSearch?: FilterSearchType<ColumnFilterItem | TreeColumnFilterItem>;
@@ -147,6 +148,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
     column,
     dropdownPrefixCls,
     columnKey,
+    filterOnClose,
     filterMultiple,
     filterMode = 'menu',
     filterSearch = false,
@@ -306,8 +308,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
 
       triggerVisible(newVisible);
 
-      // Default will filter when closed
-      if (!newVisible && !column.filterDropdown) {
+      if (!newVisible && !column.filterDropdown && filterOnClose) {
         onConfirm();
       }
     }

components/table/hooks/useFilter/index.tsx

@@ -80,7 +80,12 @@ function injectFilter<RecordType>(
 ): ColumnsType<RecordType> {
   return columns.map((column, index) => {
     const columnPos = getColumnPos(index, pos);
-    const { filterMultiple = true, filterMode, filterSearch } = column as ColumnType<RecordType>;
+    const {
+      filterOnClose = true,
+      filterMultiple = true,
+      filterMode,
+      filterSearch,
+    } = column as ColumnType<RecordType>;
 
     let newColumn: ColumnsType<RecordType>[number] = column;
 
@@ -98,6 +103,7 @@ function injectFilter<RecordType>(
             column={newColumn}
             columnKey={columnKey}
             filterState={filterState}
+            filterOnClose={filterOnClose}
             filterMultiple={filterMultiple}
             filterMode={filterMode}
             filterSearch={filterSearch}

components/table/index.en-US.md

@@ -193,6 +193,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | filtered | Whether the `dataSource` is filtered | boolean | false |  |
 | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |  |
 | filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - |  |
+| filterOnClose | Whether to trigger filter when the filter menu closes | boolean | true |  |
 | filterMultiple | Whether multiple filters can be selected | boolean | true |  |
 | filterMode | To specify the filter interface | 'menu' \| 'tree' | 'menu' | 4.17.0 |
 | filterSearch | Whether to be searchable for filter menu | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |

components/table/index.zh-CN.md

@@ -194,6 +194,7 @@ const columns = [
 | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |  |
 | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |  |
 | filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false |  |
+| filterOnClose | 是否在筛选菜单关闭时触发筛选 | boolean | true |  |
 | filterMultiple | 是否多选 | boolean | true |  |
 | filterMode | 指定筛选菜单的用户界面 | 'menu' \| 'tree' | 'menu' | 4.17.0 |
 | filterSearch | 筛选菜单项是否可搜索 | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |

components/table/interface.ts

@@ -129,6 +129,7 @@ export interface ColumnType<RecordType> extends Omit<RcColumnType<RecordType>, '
   filtered?: boolean;
   filters?: ColumnFilterItem[];
   filterDropdown?: React.ReactNode | ((props: FilterDropdownProps) => React.ReactNode);
+  filterOnClose?: boolean;
   filterMultiple?: boolean;
   filteredValue?: FilterValue | null;
   defaultFilteredValue?: FilterValue | null;