Clear search input field and column filter input field dynamically

[somnathpathak]

Current use-case

I am using default search and column filter and both search and filter change are handled remotely using onSearchChange() and onFilterChange() functions.

After reading through few existing issues, I could understand that when using remote the search change and filter change are standalone and it is on the developer on how to use them.

Issue

Since the global search and filter search are handled separately now, I would want to clear the searchField text when the user does a column filter search (inside onFilterChange() func.) and vice-versa so the user is aware of this standalone behaviour. To clear the column filter we could use cleanFiltered() function by specifying a ref to that column. But, this would fire the onFilterChange() and since we have many columns, it is fired for every clear filter case. I am not aware of how to clear the global search field.

Expected Solution

How to set the searchField text value to "" and similarly for the column filterField value, without firing the onSearchChange or onFilterChange functions?

@AllenFang

[AllenFang]

@somnath111993 I think trigger the filter/search change after clearing, that is expected behavior. if you dont want to trigger these callback function, you can consider to just remove value in the search file and column filter field via html element instead of API

for example:

document.getElementById('xxx').value = "";

[somnathpathak]

@AllenFang Great. Is there any default id assigned to the search and filter fields, if not then how can I explicitly assign an id to them?

[somnathpathak]

@AllenFang I was able to clear out the search field with the below DOM manipulation const tableGlobalSearchInputEle = document.querySelector('div.myCustomClass-container div.react-bs-table-search-form input.form-control'); tableGlobalSearchInputEle.value = '';

But since we have multiple column filter fields that are handled remotely, thus to clear them all I use the following code const tableHeaderTableEle = document.querySelector('table.myCustomClass-headerTable'); const tableHeaderRowEle = tableHeaderTableEle.querySelector('thead tr'); const allColumnFilterInputElements = tableHeaderRowEle.querySelectorAll('div input.filter.text-filter.form-control'); for (const filterInput of allColumnFilterInputElements) { filterInput.value = ''; filterInput.defaultValue = ''; }

There is an issue, as when I clear all the filter fields. The value of the corresponding <input> field is set to null, but the same is not getting updated on the UI. Could you provide some inputs on the same?

[somnathpathak]

@AllenFang As filter searchField's value is controlled by state and thus a DOM manipulation is not updating the textBox. We have found a workaround for our TextFilters, this.refs.name.textFilter.state.value = '';. It would be great if you could tell us if this could be the right way to achieve it.

[hockeymikey]

this.name.current.textFilter.applyFilter(''); worked for me!

this.name = React.createRef();