ais-hierarchical-menu with dynamic rootPath prop

[Zoltán Takács]

Bug 🐞

What is the current behavior?

Hello, I try to create a category menu and a hierarchical view containing the subcategories of the active category.

I filter the product list to show the products for the active category only by using :facet-filters.camel="`hierarchicalCategories.lvl0:${activeCategory}`". It works as expected.

I also want to narrow down the category tree to show only the subcategories of the active one by using :root-path="activeCategory" with the ais-hierarchical-menu component. On the first page load everything looks great, but it stops working after I change the active category by clicking on the 'Video Games' category.

Sandbox

What is the expected behavior?

The category tree should be updated to display the subcategories of the new active category.

What is the proposed solution?

I think the problem is with the request which is fired when the value of the root-path prop changes. The request contains the following facet form data:
facets: ["hierarchicalCategories.lvl0"]
The initial request has a different value for this attribute:
facets: ["hierarchicalCategories.lvl0","hierarchicalCategories.lvl1"]

Please let me know if there is a better approach to solve my initial problem other than I described above.

[Dhaya]

Hi, in your use case, you could use two ais-hierarchical-menu widgets:

• the first will only display root level categories
• the second will filter to the selected root level category children

By doing it this way, you let the widget directly interact with the state instead of overriding it from outside InstantSearch.

You can check out this sandbox for a working example: https://codesandbox.io/s/affectionate-dawn-iw5qd1?file=/src/App.vue.

[Zoltán Takács]

Thank you for your help @dhayab. This workaround solved my problem 👍

[Dhaya]

Good to hear! I'll go ahead and close this issue then.