How to search an antd table onChange without closing input box with confirm

Question

AntD has a couple of examples for how to search a table with their event handlers, but they use buttons for confirm and reset which are too clunky in my context. I need to be able to search onchange, so that when they remove the filter, it removes the search. I have changed the sample to remove the buttons, and added the handleSearch handler to the onChange listener.

however.

There is this stupid confirm function that is not defined anywhere, and it is closing the search dialogue every keystroke. If I comment it out, it never actually filters the table. If I leave it in, I can only search one letter at a time.

How do I modify my code so that it filters the column on change, but leaves the search input open for further input?

Data:

const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Joe Black',
        age: 42,
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Jim Green',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
    {
        key: '4',
        name: 'Jim Red',
        age: 32,
        address: 'London No. 2 Lake Park',
    },
];

Handlers:

constructor(props) {
    super(props);
    this.state = {
        searchText: '',
        searchedColumn: '',
    };
}

handleSearch = (selectedKeys, confirm, dataIndex) => {
    **confirm();//This function is not defined in code anywhere where I can edit.**
    this.setState({
        searchText: selectedKeys[0],
        searchedColumn: dataIndex,
    });
};

getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
        <div style={{ padding: 8 }}>
            <Input
                ref={node => {
                    this.searchInput = node;
                }}
                placeholder={`Search ${dataIndex}`}
                value={selectedKeys[0]}
                onChange={e => {
                    setSelectedKeys(e.target.value ? [e.target.value] : []);
                    this.handleSearch(selectedKeys, confirm, dataIndex);
                }
                }
                style={{ width: 188, marginBottom: 8, display: 'block' }}
            />
        </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
        record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
        if (visible) {
            setTimeout(() => this.searchInput.select());
        }
    },
    render: text =>
        this.state.searchedColumn === dataIndex ? (
            <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[this.state.searchText]}
                autoEscape
                textToHighlight={text.toString()}
            />
        ) : (
                text
            ),
});

Render:

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            width: '30%',
            ...this.getColumnSearchProps('name'),
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
            width: '20%',
            ...this.getColumnSearchProps('age'),
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
            ...this.getColumnSearchProps('address'),
        },
    ];

return (
        <Table columns={columns} dataSource={data} />
        );

EDIT: Screenshot showing behavior without the confirm method. Sidney should disappear.

Hamid Sarani Hamid Sarani · Accepted Answer · 2020-05-13T12:43:44

there is no problem

remove confirm(); from handleSearch function and then search working without closing search dropdown.

Edit:

to achieve this, you should handle data filtering yourself. create state variable filteredData and isFiltered and filter data manually.

How to search an antd table onChange without closing input box with confirm

1 Answers