Clearing Search Text in Column Filter Popup

Background:

The default column filters contain a search box where the user inputs text to filter data and after filtering and exiting the popup filter, the data is filtered as expected but when the input is opened again, the search text remains. Depending on the needs of your app, you may want the text to clear the text each time you open the filter popup while keeping the grid data filtered. By following this article, you can adjust the behavior to clear the search text when the filter popup is opened after filtering while leaving the filtered data in the grid untouched.

Steps to Complete:

1. Use the filterChanging event on the comboBox.

2. Set the text property of the comboBox to an empty string.

Getting Started:

Use the filterChanging event on the comboBox

To remove the text in the search bar without disturbing the filtered items use the filterChanging event and add a handler to associate the comboBox with the filter's search bar: 

filter.filterChanging.addHandler((s, e) => {
  // Getting the combobox associated with the search bar and resetting the text value when the editor is in the DOM
  const valueFiltorEditor = s.activeEditor._edtVal;
  const comboBox = valueFiltorEditor._cmbFilter;
});

Set the text property of the comboBox to an empty string

Next, we can set the text property of the comboBox to an empty string to clear the inputted search:

filter.filterChanging.addHandler((s, e) => {
  const valueFiltorEditor = s.activeEditor._edtVal;
  const comboBox = valueFiltorEditor._cmbFilter;
  // Setting the text value to an empty string
  comboBox.text = '';
  valueFiltorEditor._filterTextChanged();
});

And that's it! Your search input in your comboBox should now be cleared each time you reopen your filter popup.

Hope you found this article helpful for clearing the text from the inputted search in a column filter. A sample app showcasing this code can be found here.

Happy coding!