Instantsearch.js: Using checkbox in hierarchical menu widget

[bobylito]

Adding a checkbox in a hierarchical menu template for item has the following behavior when clicking on the box:

• ok on the first level
• on the second level, it goes back to the root instead of selecting the item
• on the second level, it's ok if we click on the text

See it live here.

I've been able to track the issue in the RefinementList which has a smart behavior to avoid double clicking but that was not built with checkbox in mind for hierarchical facet. https://github.com/algolia/instantsearch.js/blob/49f1f4bb68e371928d824e407bfca6f467405502/src/components/RefinementList/RefinementList.js#L98-L131

[Haroenv]

This seems very confusing, seems like the second level is opposite of what it should be

[YannDanthu]

Hi,
any update on this one ?
behavior still the same :(
regards

[Haroenv]

For now the way to go is to _not_ use a checkbox input, we haven't looked at this issue yet since it didn't seem to be high priority compared to other issues. Since a hierarchical menu only allows a single input a checkbox doesn't make _too_ much sense in the first place :)

[Haroenv]

If you really want to use a checkbox, you can use the connector. My example here uses select, but the idea is the same regardless of which custom DOM you want to use: https://codepen.io/Haroenv/pen/wrrrKj

[francoischalifour]

There's no update on this yet. The hierarchical menu behavior currently relies heavily on the expected DOM output, which does not ensure that it will work with any custom templates.

We will let you know in this thread if/when we plan on addressing this issue. As @Haroenv suggested, using a connector is the best way to handle these edge cases.

[YannDanthu]

ok no problemo :)
In fact using fontawesome fa-square / fa-check-square do the trick easily for our needs ;)

[markandan]

I using the connector to recreate the same using the checkboxes. I also have a use case whereby user should be allowed to check multiple leaf nodes in the hierarchical menu.

Example:
I've the hierarchy menu like: Geography > Asia > India , Geography > Asia > China, Geography > Europe > France, Geography > Europe > UK.

Users should be able to select more than one country in the menu. If you could help me how to achieve this, this would be helpful. Currently, only one selection is possible using the Hierarchical Menu connector. Am i missing something?

[Haroenv]

Only one selection will be possible, this is an underlying limitation in the helper code for hierarchical menus, to which we are aware. It seems like we have no issue open in InstantSearch.js, but we have an open issue you can upvote on React InstantSearch: https://github.com/algolia/react-instantsearch/issues/24

[Haroenv]

I'll close this issue here, since visually using a check box using the connector is possible; but the multiple selection is indeed not possible (and outside of the scope of this issue)