Stale text field data after changing filter state

[danielpaz6]

• what edition are you using - community
• version for 4.18

What happened:

When you try to insert a filter state, you will find out that the previous text in the inputs will stay still, even if your new filter state has nothing to do with certain fields in there.

Problem description:

Suggested solution:

Whenever you insert a new filter state, please make sure you clear all previous fields first. I tried to do it by myself but unfortunately, I'm not familiar enough with this package implementation.

In order to reproduce this bug, you can copy and paste the following code:

import React, { useState, useCallback } from 'react'
import ReactDataGrid from '@inovua/reactdatagrid-enterprise'
import '@inovua/reactdatagrid-enterprise/index.css'

import filter from '@inovua/reactdatagrid-community/filter'

import people from './people'
import flags from './flags'

const gridStyle = { minHeight: 550 }

const defaultFilterValue = [
  { name: 'name', operator: 'startsWith', type: 'string', value: 'B' },
  { name: 'age', operator: 'gte', type: 'number', value: 21 }
]

const defaultFilterValue2 = [
  { name: 'name', operator: 'startsWith', type: 'string', value: 'B' },
  { name: 'age', operator: 'gte', type: 'number', value: null }
]

const columns = [
  { name: 'id', header: 'Id', defaultVisible: false, type: 'number', defaultWidth: 80 },
  { name: 'name', defaultFlex: 1, header: 'Name' },
  { name: 'age', defaultFlex: 1, type: 'number', header: 'Age' },
  { name: 'country', defaultFlex: 1, render: ({ value })=> flags[value] ? flags[value] : value, header: 'Country' },
  { name: 'city', defaultFlex: 1, header: 'City' }
]


const App = () => {
  const initialData = useCallback(filter(people, defaultFilterValue), []);

  const [dataSource, setDataSource] = useState(initialData);
  const [filterValue, setFilterValue] = useState(defaultFilterValue);

  const onFilterValueChange = useCallback((filterValue) => {
    const data = filter(people, filterValue)

    setFilterValue(filterValue);
    setDataSource(data);
  }, [])

  return (
    <div>
      <p>
        <button onClick={() => setFilterValue(defaultFilterValue)}>filter value set 1</button>
        <button onClick={() => setFilterValue(defaultFilterValue2)}>filter value set 2</button>
      </p>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        onFilterValueChange={onFilterValueChange}
        filterValue={filterValue}
        columns={columns}
        dataSource={dataSource}
      />
      <p>Delete the filters if you want to show all data. You can click the configure icon and then "Clear All"</p>
    </div>
  );
}

export default () => <App />

You can even paste it at https://reactdatagrid.io/docs/api-reference#props-filterValue in any API example editor, that's what I did.

Then, press the first button (filter value set 1) and then filter value set 2 and you will find out that the "age" field still has a value.