React-instantsearch: Unable to clear refinementList in multi-index search

[hypervillain]

Hello all,

I am currently unable to programmatically clear the refinement list provided by InstantSearch. Reading the code from connectCurrentRefinements, I should be able to provide a transformItems method to clear currentRefinements without any user input.

Here is a portion of code, which illustrates what I am trying to achieve :

My comprehension of connectCurrentRefinements is that I should be able to apply different refinements to indexes, which is mandatory when several indexes are displayed on the same page but don't share the same facets.

Any help or guidance is welcomed!

Thanks for your time and concern,
Hugo

[Haroenv]

Hey Hugo, could you try to extract that into for example a sandbox, it's pretty hard to try things out from a screenshot, thanks!

[hypervillain]

On my way

[hypervillain]

Hero you go : https://jsfiddle.net/8r928c4y/19/

As you can see, if you do a simple search ("assistant" for example), you get a list of offers and tags. But if you apply any filter ("CDI", or "CDD"), tags won't appear anymore because they share the same disjunctiveFacets as the main index.

My comprehension of connectCurrentRefinements is that returning an empty array with transformItems should clear refinements for Tags index

I hope the fiddle will help ;)

[samouss]

Hi @THook! If I correctly understand your needs, you want the RefinementList to only be applied on the "Offer" index instead of both. Actually the CurrentRefinements is designed for display the refinements applied on the query. We don't use it for compute the query parameters. By returning an empty array from transformItems means that the refinements apply on the query will never be displayed.

Instead of using a connectRefinements for create a custom widget you can simply wrap your RefinementList with an Index component along with the hits. By scoping them they will only be applied on the current index.

 <InstantSearch
  appId="M9LRFRZ03L"
  apiKey="a7b6fd817868daa0ac5d10cd802f6cba"
  indexName="Offer"
>
  <SearchBox />
  <Configure hitsPerPage={5} />

  <Index indexName="Tags">
    <h3>Tags : </h3>
    <Hits hitComponent={TagHit} />
  </Index>

  <Index indexName="Offer">
    <h3>Offres : </h3>
    <RefinementList attributeName="contractType" />
    <Hits hitComponent={OfferHit} />
  </Index>
</InstantSearch>

[hypervillain]

Thank you for your answer @samouss , this was my first approach but I didn't think you had to wrap Offer hits too. Unfortunately, our current UI won't make this implementation easy (3 rows with last row used for filtering) but we'll find a way...

Thanks again!

Edit : this is actually fairly simple! https://jsfiddle.net/8r928c4y/20/

[samouss]

Thanks for the feedback, I will close this issue. Feel free to reopen it if needed 😉