Refinement Lists not persisting when affected by a Vue Transition.

Bug 🐞

What is the current behavior?

I’m using a set of refinements that I’d like to show/hide with a Vue <transition>. Have tried either basic transition setup as per the Vue docs. When the elements are transitioned in (what seems to be) any way at all, the refinements are all cleared

Make a sandbox with the current behavior

Link to sandbox example, enable a refinement then click the “Toggle Refinements” under the search bar. Note the list transitions to the left and the search results change. Toggling the list again reveals it and you can see the refinement/s have been cleared/reset.

What is the expected behavior?

Refinements should remain active, the DOM elements don’t appear to be being re-rendered but the state attribute in the Vue components is quickly flicking from null back to it’s loaded state which seems to be clearing the refinements.

Does this happen only in specific situations?

Seems to happen with any type of transition at all.

What is the proposed solution?

To retain the state of any refinements that are subject to a transition

What is the version you are using?

Latest, as per sandbox.

Happy to provide any further details if necessary.

[AdrianwithaW]

@Haroenv yeah that’s right. Worth mentioning though you can also use transitions by having two different sets of classes that the DOM element will toggle between depending on a variable or some other condition - arguably the equivalent of a v-show / v-hide transition. This bug also occurs then, and in that case the refinements still lose their state.

I’ve had to use a standard JavaScript class toggle in my case, so was fixable. But definitely some inconsistent behaviour with the component states that can cause issues. Appreciate the discussion about it! 👏

[AdrianwithaW]

Hmm, I thought I tried v-show but will double check!