Automatically Clear Filter Search Box in Angular

Background:

When using the FlexGrid filter modal, the search input inside the filter dialog retains the previously typed value when the modal is reopened. Developers may want the search box to always start blank each time the filter modal is opened to display the full set of values again.

Steps to Complete:

1. Detect when the filter modal is opening using the filterChanging event on the FlexGridFilter
2. Use a short delay (setTimeout) to ensure the filter popup has fully rendered
3. Select the search input element from the popup and programmatically clear its value
4. Dispatch an input event to refresh the filter list display

Getting Started:

Detect when the filter modal is opening using the filterChanging event on the FlexGridFilter

filter.filterChanging.addHandler((s, e) => {
  const col = e.getColumn();
  if (col.binding === 'id') {
    ...
  }
});

Use a short delay (setTimeout) to ensure the filter popup has fully rendered

filter.filterChanging.addHandler((s, e) => {
  const col = e.getColumn();
  if (col.binding === 'id') {
    setTimeout(() => {
     ...
    }, 50);
  }
});

Select the search input element from the popup and programmatically clear its value

const searchBox: HTMLInputElement = document.querySelector('.wj-dropdown-panel input.wj-form-control[type="text"]');
if (searchBox) {
   searchBox.value = '';  // Clear the input
...
}

Dispatch an input event to refresh the filter list display

searchBox.dispatchEvent(new Event('input')); // Refresh the filter list

Complete filterChanging event should look like this:

filter.filterChanging.addHandler((s, e) => {
  const col = e.getColumn();
  if (col.binding === 'id') {
    setTimeout(() => {
      const searchBox: HTMLInputElement =
        document.querySelector('.wj-dropdown-panel input.wj-form-control[type="text"]');
      if (searchBox) {
        searchBox.value = '';  // Clear the input
        searchBox.dispatchEvent(new Event('input')); // Refresh the filter list
      }
    }, 50);
  }
});

Here, we target the search input (.wj-form-control[type="text"]) inside the .wj-dropdown-panel that Wijmo uses for its filter popup. Wrapping this logic in setTimeout ensures the input is cleared only after the popup is fully rendered.

And that's it! If implemented correctly, your filter modal's search input now automatically clears itself.

Happy coding!