Hierarchical Menu Widget using Checkboxes

Using the hierarchical menu widget I’m trying to achieve this design:


Here is a demo where I am trying to use checkboxes instead of links with the widget: https://codepen.io/Giovanni-Mattucci/pen/zEOEdy

The first level of faceting through the hierarchical menu works, but the second level doesn’t…

Any idea on how I could take over the event on that second checkbox and apply the value of it to the page correctly?

I know that someone asked a question similar to this on github as well: https://github.com/algolia/instantsearch.js/issues/1658

Hi there,

As of now we do not support multiple selections in a hierarchical menu. The implementations is tedious and will require a significant number of request operations. This is not in our roadmap for the next quarter. I’m sorry :frowning:

Cheers,

Ok, thanks for the info.

Any way to “fake” the checkboxes? Really care more about the style of the checkboxes vs the links more than anything.

Perhaps a way to hijack react’s click event on the specific <input />?
If you can’t think of any way to do this (through instantsearch), well, I’ll leave the topic alone :slight_smile:

I know I could probably spend the time creating a custom widget to achieve what I’m looking for.

Oh that should be pretty easy, you can pass a template for the item:

If you want to do a full customization of the widget you can use the connector but that seems a little bit overkill for your use case.

Let us know how it goes.

1 Like

Awesome thanks for passing me the info about the connector :slight_smile: good to know I have that option.

Now, I am running into a problem (maybe a bug) when adding an <input type="checkbox">.
First level works fine, but on the second level there is an event on the checkbox that causes the hierarchical facet to reset. You can see the behaviour here: https://codepen.io/Giovanni-Mattucci/pen/dVVyBB

If you click the link, it works fine, but if you click the second level checkbox, it resets the query.

Good news, I’ve been able to add the check to the checkboxes https://codepen.io/bobylito/pen/boorrR?editors=1000 but also your test highlight a bug in our implementation. I’ve created an issue so that you can follow up.

So for now you’re only option is to use a connector.

1 Like

Awesome :slight_smile: Damn, it is almost where I want it!

Glad it found a bug though!

A lot of time has passed on this, do we have a better implementation for this today allowing disjunctive checkboxes in hierarchical menu?

I have not had success in building a hierarchical menu with checkboxes, but I did achieve check boxes with regular refinement list.

You would need to build your own custom widget using instantsearch’s connectHierarchicalMenu if you want to get the hierarchical widget to work with checkboxes.