algolia / instantsearch

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.

Home Page:https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Configure widget does not persist parameters after applying filters

dziugas-liaudinskas opened this issue · comments

🐛 Current behavior

When adding facetFilters to the Configure widget to show hits only for specific category everything seems to work fine. But if then you apply any filter from the RefinementList then hits from different categories appear.

🔍 Steps to reproduce

  1. Go to this sandbox;
  2. At /app/components/Search.tsx line 92 you can see the Configure widget with facetFilters passed. facetFilters comes from /app/routes/category/$slug.tsx where for this case I hardcoded one category;
  3. Start the app and click on Click to check out speakers! or navigate to /category/speakers;
  4. On the /category/speakers page you can see hits with the text Does hit categories include Speakers (/app/components/Search.tsx line 51). On initial load, all hits say that they include the category Speakers;
  5. Now press on the left side the RefinementList SpeakerCraft option. See that some of the hits now say that they do not include the category Speakers;

Live reproduction

https://codesandbox.io/p/github/dziugas-liaudinskas/algolia-example/master?file=%2FREADME.md

💭 Expected behavior

As it says in docs, Configure should forward search parameters to Algolia. I think it would make sense if those parameters would persist after some filters are applied

Package version

instantsearch.js 4.51.1, react-instantsearch-hooks-web 6.40.1, algoliasearch 4.14.3

Operating system

No response

Browser

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Hello @dziugas-liaudinskas!

The <RefinementList> widget is already using the facetFilters parameter behind the scenes.
So the facetFilters parameter you pass to the <Configure> widget is overwritten when you refine an item in the <RefinementList> widget.

What you can do is using the filters parameter instead in the <Configure> widget, so both facetFilters and filters parameters are combined with an AND operator: https://www.algolia.com/doc/guides/managing-results/refine-results/filtering/in-depth/filters-and-facetfilters/#combining-filters-and-facetfilters-within-the-same-search

Here is a fork of your Sandbox using the filters parameter: https://codesandbox.io/p/github/dziugas-liaudinskas/algolia-example/csb-4i5m2j/draft/youthful-lewin?file=/app/components/Search.tsx

Hope that helps!