CODEWITHSUNDEEP
reactjsantd
Stathis Ntonas
Stathis Ntonas

Reputation: 1262

React antd table reset search box input on button click

I want to reset the custom search dropdown text input when clicking a button when using antd table.

I can't ref the filterDropdown, I've tried to ref the table but no luck, it wont give me back handleClearFilters in order to clear the search input since this prop belongs to filterDropdown.

Has anyone managed to clear the search input?

playground: https://codesandbox.io/s/87o53mq29

Update:

Here's the final working code as per @shubham answer:

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Icon } from "antd";
import Highlighter from "react-highlight-words";

class App extends React.Component {
  state = {
    searchText: "",
    key: 0,
    data: [
      {
        key: "1",
        name: "John Brown"
      },
      {
        key: "2",
        name: "Joe Black"
      }
    ]
  };

  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters
    }) => (
      <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] : [])
          }
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{ width: 188, marginBottom: 8, display: "block" }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button
          onClick={() => this.handleReset(clearFilters)}
          size="small"
          style={{ width: 90 }}
        >
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" 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 => (
      <Highlighter
        highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
        searchWords={[this.state.searchText]}
        autoEscape
        textToHighlight={text.toString()}
      />
    )
  });

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setState({ searchText: selectedKeys[0] });
  };

  handleReset = clearFilters => {
    clearFilters();
    this.setState({ searchText: "" });
  };

  reset = () => {
    this.setState({ key: this.state.key + 1, searchText: '' });
  };

  render() {
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        key: "name",
        width: "30%",
        ...this.getColumnSearchProps("name")
      }
    ];
    return (
      <div>
        <button onClick={this.reset}>Reload and Reset Search Filter</button>
        <Table key={this.state.key} columns={columns} dataSource={this.state.data} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"))

Upvotes: 2

Views: 4767

Answers (1)

shubham
shubham

Reputation: 449

one solution is to make the table component itself to rerender by doing the following : * add a key to the table componet

  <Table key={this.state.index} columns={columns} dataSource={data} />

in the state add a new value as follows : 

class App extends React.Component {
  state = {
    searchText: '',
    index: 0
  };
...

modidy the resetSearch function as follows : 

resetSearch = () => {
      this.setState({
        index: this.state.index + 1
      })
  }

This should reset the input box aswell, once the table rerenders after the key has changed.

Upvotes: 6

Related Questions