Apply a multi selection of categories with the HierarchicalMenu component within the InstantSearch component

Hi there,

We are making use of your react component library and are implementing a Hierarchical Category Filter. The implementation is almost successful but we are not able to get it fully to work as we desire.

Current outcome:
We are not able to do a multi-selection, for example (see image below). ‘Categorieen’ in combination with ‘Dagjest uit’. As you can see in the image below. If we would select ‘Dagjes uit’ it would deselect ‘Categorieen’. Which is not the desired behavior.

Desired outcome:
Note the image below is a design from our designers (not a working UI, yet I hope). We would like to be able to make a multi-selection within the HierchicalMenu like in the design below. So the user needs to be able to select multiple categories and also within the deeper structure.

For the non-hierarchical filters in our implementation, we are using the RefinementList component. Which is able to handle an Array<string> in the refine() function. But the refine() function of the HierarchicalMenu component is only able to handle a string, when passing an Array<string> it results in console.errors.

Is there a way to make this work?

1 Like

Please anybody can solve above problem. I am using this

instantsearch.widgets.refinementList({
container: ‘#categories’,
attribute: ‘hierarchical_categories.lvl2’,
//filters: ‘list_categories:Women’,
showMore: true,
searchable: true,
searchablePlaceholder: ‘Find a Category’,
limit: 5,
}),

but i want multilevel category search.