Can I dynamically select multiple values using the menuSelect widget?

Open Q&A
, ,
1

We have an instantsearch instance (v4.22.0) that uses menuSelect widgets for filtering. Our dataset has a couple of values that overlap and we’d like to show results from both if either of them are selected.

Here’s a simplified example of our dataset:

[
  {
    "id": 1,
    "title": "Blue shirt",
    "color": ["Blue"]
  },
  {
    "id": 2,
    "title": "Light blue shirt",
    "color": ["Light Blue"]
  },
{
    "id": 3,
    "title": "Red shirt",
    "color": ["Red"]
  },
]

We’d like to make it so that if someone selects “Blue” you’d also see “Light Blue” shirts in the results (and vice-versa). Unfortunately we’re unable to modify the dataset and merge the two values that way.

I’ve tried doing this using the instantsearch helper, but the problem I’m encountering is that the color facet seems to be hierarchical, meaning it can only have a single value at any one time - if I try to add another I get the message:

Error: color is already refined.

Psuedo-code example:

instantsearch({
  indexName: "example",
  searchClient,
  searchFunction(helper) {
    // Get the selected color
    var filteredColors = helper.state.getHierarchicalRefinement("color");

    // Check which blues are chosen
    containsBlue = filteredColors.includes("Blue");
    containsLightBlue = filteredColors.includes("Light Blue");

    // If only one of the blues is selected, add the other one
    if( containsBlue && !containsLightBlue ) {
      helper.addHierarchicalFacetRefinement("color", "Light Blue")
    } else if( containsLightBlue && !containsBlue ) {
      helper.addHierarchicalFacetRefinement("color", "Blue")
    }

    helper.search()
  }
});

I’ve been able to do this using a refinementList instead (and addDisjunctiveFacetRefinement) but we don’t want to use a refinementList for this particular field.

So my question is: Is it possible to do this using a menuSelect or is our only option to use a different type of widget?

Thanks!