let facetWrap = $('.esa-ajax .facets');
This code selects elements from the DOM using a jQuery selector and stores them in the facetWrap variable.
If the DOM is modified after this line of code runs, facetWrap will not automatically update to reflect those changes.
To keep facetWrap up-to-date with the current state of the DOM, we would need to re-run the selector or update facetWrap when the DOM has changed.
In getSelectedFacets we do:
facetWrap.find('[data-facet="' + facet + '"]').each(function (idx, element) {
and
$(element).find('input:checked').each(function (i, e) {
Because we do not update the facetWrap variable, the code finds inputs that are checked, even though they are not.
Example to reproduce the bug:
Given a search page and a single facet box:
- I check the checkbox -> result page ajax refreshes with filtered results
- I uncheck the checkbox -> result page ajax refresh with unfiltered results
- I enter a new search term and submit the search form
- The checkbox automatically checks itself again and I get filtered results