Vue-instantsearch: Routing Question - V2

[matthewmnewman]

I am currently exploring the new version of Vue instant search and I am wondering if you can provide me with guidence on why my browser is timing out when routing is enabled.

Issue:

I am currently utilising a Modal popup with a basic v-show to display the vue instantsearch component filters (Refinement List / Select Menu etc). Everything works as expected, you are able to filter and then close the modal etc. However, when routing is enabled the modal will appear but it then becomes unresponsive when trying to use any filter. I believe this might be in relation to the DOM and is a back to basics issue so I apologise in advance.

Any guidance or direction on how this can be resolved that would be appreciated.

Thanks in advance.

[Haroenv]

Seems like an infinite loop might have been popping up because of that. Can you make a sandbox to show that please? It will help in seeing the source of the issue fast!

[matthewmnewman]

After further analysis it seems to be related to the SortBy Component. When switching from each of my Indices it is causing an infinite loop. Since i am using a independent modal component which is not utilising searchStore i am guessing it is not maintaining the search state.

This issue only occurs when routing is enabled and you can see that when you select the trigger as it resets the indices when you select the modal to open.

_Trigger:_
<a class="button" @click="isModalVisible = true">

_Modal:_
<modal :show="isModalVisible" @close="isModalVisible = false"></modal>

You can replicate this on the sandbox environment by triggering the @click trigger on a basic v-show or v-if.

[Haroenv]

This is probably because you wrote the sortBy array inline, does it resolve when you move it from inline to in data?

I can't see an infinite loop here in this https://codesandbox.io/s/zwmjq24v1l, but which modal are you using? Can you edit my fiddle to have an infinite loop? :)

[dulnan]

I was having a (I think) similar issue with refinement lists. When having an inline array for the sortBy attribute, it would reset the selected refinements. See here: https://codesandbox.io/s/9324rjjz3p

Moving the array to data () fixes it.

[matthewmnewman]

I appreciate the support on this issue, moving the array from inline to data() has fixed this issue. Might be worth adding a note in the documentation in the future as this may help others.

[Haroenv]

This is a regular Vue issue, if you have an array inline, it can't keep track of the differences. The solution is to put arrays and objects in data. Thanks!