DataGrid/ListBase filterDelay not behaving in the expected way

[chrwei]

this might only apply when remote filtering
as a test, I set filterDelay={5000}

I would expect that each new keystroke would reset the delay, and as long as I press any kind of key, including arrows, the actual filtering would not happen.

what happens is that every 5 seconds as long as I'm typing a another filter request is done.

My requests take a bit to process, and since it's all async it's not only causing extra server load, but also the requests don't come back in the same order, especially since a more specific filter will return faster, so sometimes the final search will return before the previous one completes, resulting in the desired data being replaced by the previous!

I think the below test case based on your remote filter example should show the issue, though I can't test it because your server doesn't allow CORS from http://localhost:3000/.  The console should show the requests with a timestamp

Code:

import React from 'react';
import { DataGrid, GridColumn, NumberBox } from 'rc-easyui';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      data: [],
      pageNumber: 1,
      loading: false,
      filterRules: null,
      operators: ["nofilter", "less", "greater"]
    }
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData() {
    const { pageNumber, filterRules } = this.state;
    const config = {
      credentials: 'include',
      method: 'post',
      mode: 'cors',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
      },
      body: `page=${pageNumber}&rows=10&filterRules=${filterRules}`
    };
    const url = 'https://www.jeasyui.com/demo/main/datagrid33_getdata.php';
    this.setState({ loading: true })
    fetch(url, config).then(res => {
      return res.json();
    }).then(data => {
      this.setState({
        total: parseInt(data.total, 10),
        data: data.rows,
        loading: false
      })
    })
  }
  handlePageChange({ pageNumber, refresh }) {
    if (refresh) {
      this.fetchData();
    } else {
      this.setState({ pageNumber: pageNumber }, () => {
        this.fetchData();
      })
    }
  }
  handleFilterChange(filterRules) {
    console.log(new Date().getTime(), JSON.stringify(filterRules))
    this.setState({ filterRules: JSON.stringify(filterRules) }, () => {
      this.fetchData()
    })
  }
  render() {
    return (
      <div>
        <h2>Remote Filtering</h2>
        <DataGrid
          style={{ height: 250 }}
          total={this.state.total}
          data={this.state.data}
          pageSize={10}
          pageNumber={this.state.pageNumber}
          loading={this.state.loading}
          pagination
          lazy
          filterable
  filterDelay={5000}
          onPageChange={this.handlePageChange.bind(this)}
          onFilterChange={this.handleFilterChange.bind(this)}
        >
          <GridColumn field="itemid" title="Item ID"></GridColumn>
          <GridColumn field="productid" title="Product"></GridColumn>
          <GridColumn field="listprice" title="List Price" align="right"
            filterOperators={this.state.operators}
            defaultFilterOperator="nofilter"
            filter={() => <NumberBox></NumberBox>}
          />
          <GridColumn field="unitcost" title="Unit Cost" align="right"
            filterOperators={this.state.operators}
            defaultFilterOperator="nofilter"
            filter={() => <NumberBox></NumberBox>}
          />
          <GridColumn field="attr1" title="Attribute" width="30%"></GridColumn>
        </DataGrid>
      </div>
    );
  }
}
 
export default App;

[jarry]

Please update to the newest version.