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

instantsearch
filters
angular
ais-menu

#1

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?


#2

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?


#3

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: http://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/angular-instantsearch