Automatically Clear the Filter Search Box in React

Background:

The FlexGrid’s Excel-like filter dialog keeps the last search string when you reopen it. If you’d prefer the search box to start blank every time, hook the filter’s filterChanging event and clear the dialog’s search input after the popup renders.

Steps to Complete:

1. Get a reference to the FlexGridFilter instance (via the React wrapper’s initialized prop).
2. Listen for the filterChanging event on that instance.
3. Use a short setTimeout so the popup is fully in the DOM.
4. Query the search input inside the filter dialog, clear its value, and dispatch an input event so the list refreshes.

Getting Started:

// App.jsx
// Use your own data here
const sampleData = [
  { id: 1, country: 'US', sales: 123 },
  { id: 2, country: 'JP', sales: 456 },
  // ...
];

export default function GridWithAutoClearingFilter() {
  const [filter, setFilter] = useState(null); // holds FlexGridFilter instance

  // Attach the handler once the filter is initialized
  useEffect(() => {
    if (!filter) return;

    const onFilterChanging = (s, e) => {
      // Optionally scope to a specific column:
      // const col = e.getColumn();
      // if (col.binding !== 'id') return;

      // Wait for the popup to render, then clear the search box
      setTimeout(() => {
        const searchBox = document.querySelector(
          '.wj-dropdown-panel input.wj-form-control[type="text"]'
        );
        if (searchBox) {
          searchBox.value = '';
          // trigger filter UI to recompute the value list
          searchBox.dispatchEvent(new Event('input', { bubbles: true }));
        }
      }, 50);
    };

    filter.filterChanging.addHandler(onFilterChanging);
    return () => filter.filterChanging.removeHandler(onFilterChanging);
  }, [filter]);

  return (
    <div style={{ height: 400 }}>
      <wjGrid.FlexGrid itemsSource={sampleData}>
        {/* Store the FlexGridFilter instance when it initializes */}
        <wjFilter.FlexGridFilter initialized={setFilter} />
      </wjGrid.FlexGrid>
    </div>
  );
}

That’s it, each time a user opens a column’s filter, the search box starts empty, and the full value list is shown again.

Happy coding!