Select filter showing up again after resetting, with remote filter enabled.

[bharatgupta99]

Describe the bug
I am using select filter with filter remote enabled on two columns. Also, there is a reset button to reset filters. Applying filter on the first column and clicking the reset filter button. After that I apply filter on second column somehow filter on first column appears again.

To Reproduce
Steps to reproduce the behavior:

1. Apply filter on the first column.
2. Click the reset filter button
3. Apply filter on the second column.

codesandbox
https://codesandbox.io/s/react-bootstrap-table-next-basic-example-h9yvm?fontsize=14&hidenavigation=1&theme=dark

[AllenFang]

Hello, @bharatgupta99 sorry for lately reply, I can confirm this bug and i will fix it ASAP, thanks for the bug report.

[AllenFang]

@bharatgupta99 sorry it's a fake alarm, I think we have a better way to reset filter, I just change you code to fix this issue:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import BootstrapTable from "react-bootstrap-table-next";
import "bootstrap/dist/css/bootstrap.min.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import "./styles.css";
import filterFactory, { selectFilter } from "react-bootstrap-table2-filter";

class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filters: {}
    };
    this.type1Filter = null;
    this.type2Filter = null;
  }

  onTableChange = (type, newState) => {
    this.setState({
      filters: newState.filters
    });
  };

  resetFilters = () => {
    this.type1Filter('');
    this.type2Filter('');
  };

  render() {
    const { filters } = this.state;

    const selectOptions = {
      a: "a",
      b: "b"
    };

    const products = () => {
      const { filters } = this.state;
      console.log("d=>", filters);
      let items = [
        { id: 1, name: "Item 1", type1: "a", type2: "b" },
        { id: 2, name: "Item 2", type1: "b", type2: "b" },
        { id: 3, name: "Item 3", type1: "b", type2: "a" },
        { id: 4, name: "Item 4", type1: "a", type2: "a" }
      ];

      const type1Filter = filters.type1 ? filters.type1.filterVal : null;
      const type2Filter = filters.type2 ? filters.type2.filterVal : null;

      if (type1Filter) {
        items = items.filter(item => item.type1 === type1Filter);
      }

      if (type2Filter) {
        items = items.filter(item => item.type2 === type2Filter);
      }

      return items;
    };

    const columns = [
      {
        dataField: "id",
        text: "Product ID"
      },
      {
        dataField: "name",
        text: "Product Name"
      },
      {
        dataField: "type1",
        text: "Type1",
        filter: selectFilter({
          options: selectOptions,
          getFilter: (filter) => {
            this.type1Filter = filter;
          }
        })
      },
      {
        dataField: "type2",
        text: "Type2",
        filter: selectFilter({
          options: selectOptions,
          getFilter: (filter) => {
            this.type2Filter = filter;
          }
        })
      }
    ];

    return (
      <div style={{ padding: "20px" }}>
        <h1 className="h2">Products</h1>
        <button onClick={this.resetFilters}>Reset Filters</button>
        <BootstrapTable
          keyField="id"
          data={products()}
          columns={columns}
          remote={{ filter: true }}
          onTableChange={this.onTableChange}
          filter={filterFactory()}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ProductList />, rootElement);

Here is an online example to show how to clear filter.