diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx index a62e7ada68f3..be07261e3e52 100644 --- a/components/table/__tests__/Table.filter.test.tsx +++ b/components/table/__tests__/Table.filter.test.tsx @@ -2079,6 +2079,44 @@ describe('Table.filter', () => { fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '111' } }); }); + it('renders empty element when search not found', () => { + jest.spyOn(console, 'error').mockImplementation(() => undefined); + const { container, unmount } = render( + createTable({ + columns: [ + { + ...column, + filters: [ + { + text: '123', + value: '456', + }, + { + text: 123456, + value: '456', + }, + { + text: '456', + value: '456', + }, + ], + filterSearch: true, + }, + ], + }), + ); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger')!, nativeEvent); + act(() => { + jest.runAllTimers(); + }); + expect(container.querySelectorAll('.ant-table-filter-dropdown-search').length).toBe(1); + expect(container.querySelectorAll('.ant-input').length).toBe(1); + fireEvent.change(container.querySelector('.ant-input')!, { target: { value: '111' } }); + expect(container.querySelector('.ant-empty')).toBeTruthy(); + + unmount(); + }); + it('supports search input in filter menu', () => { jest.spyOn(console, 'error').mockImplementation(() => undefined); const { container } = render( diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index c2482d8e6185..aefb037d0653 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -367,20 +367,21 @@ function FilterDropdown(props: FilterDropdownProps) { } else { const selectedKeys = getFilteredKeysSync() || []; const getFilterComponent = () => { + const empty = ( + + ); if ((column.filters || []).length === 0) { - return ( - - ); + return empty; } if (filterMode === 'tree') { return ( @@ -435,6 +436,16 @@ function FilterDropdown(props: FilterDropdownProps) { ); } + const items = renderFilterItems({ + filters: column.filters || [], + filterSearch, + prefixCls, + filteredKeys: getFilteredKeysSync(), + filterMultiple, + searchValue, + }); + const isEmpty = items.every((item) => item === null); + return ( <> (props: FilterDropdownProps) { tablePrefixCls={tablePrefixCls} locale={locale} /> - + {isEmpty ? empty : ( + + )} ); };