Reset button is not closing for Table Filter of antd 4.18.5

Question

We are using antd(4.18.5) table filter. when clicking on the reset button, it will reset the dropdown but that dropdown is not closing. I need to close that dropdown when clicking the reset button. Actually when i click on outside of that dropdown, the dropdown is closing and the original table will display by api call. So i need to close that dropdown and original table should display when clicking on reset button. But i am not able to find the function call when clicking on the reset button. I have tried to close that dropdown by giving style.

if(document.getElementsByClassName('ant-table-filter-dropdown-btns')[0] && 
   document.getElementsByClassName('ant-btn-sm')[0]){
    document.getElementsByClassName('ant-btn-sm')[0].addEventListener('click',()=>{
      document.getElementsByClassName('ant-dropdown')[0].style.display='none';
    })
}

but that also not working. Anyone can help me on this? Thanks

Answer 1

I was also looking for the same thing. But i figured it out. In table, we have locale prop having the following keys:

Interface copied from antd Typescript declaration.

export interface TableLocale {
    filterTitle?: string;
    filterConfirm?: React.ReactNode;
    filterReset?: React.ReactNode;
    filterEmptyText?: React.ReactNode;
    filterCheckall?: React.ReactNode;
    filterSearchPlaceholder?: string;
    emptyText?: React.ReactNode | (() => React.ReactNode);
    selectAll?: React.ReactNode;
    selectNone?: React.ReactNode;
    selectInvert?: React.ReactNode;
    selectionAll?: React.ReactNode;
    sortTitle?: string;
    expand?: string;
    collapse?: string;
    triggerDesc?: string;
    triggerAsc?: string;
    cancelSort?: string;
}

You can pass a ReactNode in filterReset and when we click on that node or Reset, you can close the dropdown by adding the ant-dropdown-hidden class or by making the filter dropdown visible or hide using filterDropdownVisible & onFilterDropdownVisibleChange.

locale={{
    filterReset: (
        <span
            onClick={() => {
                document.querySelector('.ant-dropdown')!.classList.add('ant-dropdown-hidden');
            }}
        >
            Reset
        </span>
    )
}}

We can use filterDropdown prop but with this prop, you need to implement everything from scratch (Handling checkbox, displaying all values, buttons etc). I had tried everything but if anyone finds there's any other option to solve this issue, can provide the solution