Vue-instantsearch: Refinement Lists not persisting when affected by a Vue Transition.

[AdrianwithaW]

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]

Further testing shows that a refinement like the <ais-range-input> is not affected in the same way and persists it's settings when part of the same transition.

[Kocal]

Hi, I had the same issue one day and I _fixed_ it by using v-show instead.
However it would be nice if we can use v-if as well.

[Haroenv]

Hmm yes this is complicated. We base the state around the fact that a widget is mounted. If you would unmount a whole tree, and mount it again, you'd expect the state to disappear. Not actually unmounting and using hidden or v-show solves that. Do you know of other libraries handling this differently?

[AdrianwithaW]

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

[AdrianwithaW]

Ok, in the sandbox using v-show seems to do the trick, but in my project it has the same effect as v-if 🤦‍♂️ back to the drawing board, thanks for the help!

[AdrianwithaW]

@Haroenv, your comment about state makes total sense. Just not 100% sure the the items are being unmounted in the case of a <transition> are they? The best example is that the state of the range input remains in tact. If they are being unmounted and remounted though, then your point stands and it's not a bug 👍

[Haroenv]

I haven't studied transition deeply myself, but as far as I can see, the user chooses whether to use v-if or v-show inside the transition

[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! 👏