Conditionally show heading for ais-refinement-list using ais-panel (ais-Panel--noRefinement?)

I’m converting a search page from Vue AIS v1 to v2.

The v1 ais-refinement-list had a slot to include a heading which would be hidden along with the rest of the component when no refinements were available.

I’m trying to recreate this on v2 but am running into some issues. Since the ais-refinement-list no longer has a header slot I understand that I now need to wrap the ais-refinement-list component in a ais-panel component. The docs explain that the ais-panel should inherit a class from the child ais-refinement-list to indicate when there are no refinements ais-Panel--noRefinement, but I can’t seem to get this working.

This is the code I’m using:

<ais-panel>
    <h3 slot="header">Historic categories</h3>
    <ais-refinement-list attribute="historic_categories" :sort-by="['count:desc', 'name:asc']" :operator="'and'" />
</ais-panel>

Hi @ben.sampson,

I didn’t managed to reproduce the issue. Once the ais-refinement-list does not have values the class .ais-RefinementList--noRefinement is added on the root element of the widget. If a ais-panel wraps the widget, the class .ais-Panel--noRefinement is also added on the root element of the component. Here is an example that hides the ais-panel when no refinements are available.

Hope that helps.