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

CurrentRefinement should not be filled when min is set on useRange

AntoineDuComptoirDesPharmacies opened this issue Β· comments

πŸ› Current behavior

Previously (react-instantsearch-dom), the connectRange was not setting refinement in currentRefinement when property min is set and no refinement have been set by the user.

When react-instantsearch-hook, setting a min value create a refinement even if user did not touch the interface.

You can see the previous behavior here : https://codesandbox.io/s/objective-germain-zmwf8p?file=/src/App.js
Range price is with a minimum of 50 but nothing appear in currentRefinement.

You can see the new behavior here : https://codesandbox.io/s/lucid-wescoff-fh9cz1?file=/src/App.tsx
A refinement appear with price > 50 even if user did not touch it.

πŸ” Steps to reproduce

  1. Go to codepen
  2. Look at the currentRefinement section

Live reproduction

https://codesandbox.io/s/lucid-wescoff-fh9cz1?file=/src/App.tsx

πŸ’­ Expected behavior

A refinement should exists when user interact with the HMI to customize the search.

Package version

react-instantsearch-hook: 6.32.0

Operating system

Widows 10

Browser

Chrome 110

Code of Conduct

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

Hi @AntoineDuComptoirDesPharmacies,

Thanks for raising this issue !
While you can exclude attributes to show in CurrentRefinements, I believe it would be nice for it to be aware of whether the current range matches min or max.
Clearing it should also stay within the set boundary.

We'll get back to you soon !

Hi @aymeric-giraudet,

Thanks for the feedback on #5515 it seems to be related.

Using the property excludedAttributes may have some side effects.

For instance, imagine we have a range of months between 2 months minimum and 12 months maximum.

  1. by default, we have numericFilters: ["month>=2","month<=12"] and we would like CurrentRefinements to display nothing (because the user did not interact with the UI)
  2. when user selects a range like numericFilters: ["month>=4","month<=6"] in this case, we would to display the refinements (because the user did interact with the UI)

Thus, if we had CurrentRefinements(excludedAttributes: ['month']) the first case is ok, but the second case is a fail (nothing will appear, but the user did change some non default values).

However, the old library react-instantsearch-dom handles the two cases rightfully.

Hi there!

I'm having the same issue, trying to set a min/max on my range to avoid having dynamic values and the current refinement gets the min/max.

As @axel-lcdp said in his comment, I would still like the current refinements displayed if the user interacts with the filter.

Did you find any workaround for this?
Thanks!

Hi there!

I'm having the same issue, trying to set a min/max on my range to avoid having dynamic values and the current refinement gets the min/max.

As @axel-lcdp said in his comment, I would still like the current refinements displayed if the user interacts with the filter.

Did you find any workaround for this? Thanks!

At the moment we cancelled our migration to react-instantsearch-hook because of this issue and some others (all regression from react-instantsearch-dom behavior) and I am not sure I can qualify this as a workaround. 😩

So for the moment our project stay on react-instantsearch-dom which is far more easier to understand and use/customize with custom connector than the hook library.

However we are still looking at this issue for, maybe one day, migrate to react-instantsearch-hook .