ais-Menu-item--selected not working everytime in filters



I am displaying a list of 10 items using ais-menu in the angular instantsearch framework. I am changing the color of the selected filter by using the ais-Menu-item–selected class that gets applied to the parent of the selected element and applying my css to the label.

However, ais-Menu-item–selected does not display for all the selected values. A lot of times, i select a filters value, the api hit also contains that search value but ais-Menu-item–selected does not get added to the label’s parent. Why is this happening?

How else can i get the selected ais-menu selected filter value and apply my own css to it in the angular instantsearch framework?


I observed that this happens when the value returned by algolia does not match any of the static values i have written in my transformFunction. Does ais-menu-item–selected work only when my static filter value match the one returned from algolia?


Could you write what you statically added etc. into a sandbox, the issue is likely somewhere related to that indeed. Do you correctly set up “isRefined” in the static values?

We have an example sandbox here: