Vue-instantsearch: Update of component containing instant-search causes refinements to be lost

[drpeck]

Bug 🐞

What is the current behaviour?

I have a refinement list which is set using the sync approach with the Vue Router. This works fine. When one (only) element is selected in the refinement list a panel appears with extra info about that refinement item. When that panel updates any refinement values since page load are lost.

An example of routing
Url: /
Two refinement lists (movie company and movie type) load with nothing selected

Url: /Disney
Two refinement lists (movie company and movie type) load. Movie company has the value 'Disney' selected. A panel appears showing info about the Disney company.

Url: /Animated
Two refinement lists (movie company and movie type) load. Movie type has the value 'Animated' selected.

Url: /Disney-Animated
Two refinement lists (movie company and movie type) load. Movie company has the value 'Disney' selected. Movie type has the value 'Animated' selected. A panel appears showing info about the Disney company.

Recreation steps:

1. If we load the page with the url '/Animated', then deselect 'animated' in the refinement list: url becomes '/' (GOOD)
2. Select Disney, the url becomes /Disney-Animated instead of /Disney (BAD)

What is the expected behavior?

The cause appears to be that when you select a single movie the panel appearing causes an update in the component. This appears to reset the state data to page load's values.

Does this happen only in specific situations?

This only appears to happen when an event outside of the AIS lifecycle causes the component to update. I believe it also only happens when using the Vue Router sync.

What is the proposed solution?

Handle component updates

What is the version you are using?

2.0.0-beta.3

[samouss]

Hi thanks a lot for the detailed report! Could you provide a live example of the issue. It would help us better understand where the issue might come from. We have template to avoid you the boilerplate part. You can find it on CodeSandbox.

[Haroenv]

@samouss do you think this is the same issue as earlier today? https://github.com/algolia/instantsearch.js/issues/3497

[samouss]

Might be, might be not. We've to investigate.

[drpeck]

I've managed to work around this by using the router syncing differently. I'm not sure if this is correctly classified as a bug therefore. It could be, or it might just be that my implementation was wrong. The documentation is rather sparse unfortunately.

I've not objection to you closing the ticket though.

[Haroenv]

@drpeck do you still have a sandbox of this old behaviour so we can see wether it's a bug as expected, or maybe it could be because you have an inline object in the template, which causes vue to rerender the whole child tree, which loses refinements

[mcstover]

Hi @Haroenv

We've experienced a somewhat similar issue with the Refinement list losing selections. But it's only when we apply the sort-by attribute. Any help would be appreciated. Also happy to file a separate issue if you'd like. Can also chat in ps-kiva slack if you want.

https://codesandbox.io/s/kxo34k6qm3 (Original)

Additional example wherein we also lose state of the Hierarchical Menu which doesn't have any sort attribute applied...Def looks like something deeper.
https://codesandbox.io/s/4wp4yw7rr7

-

So we found an interesting work around. Our original setup was to pass the ais- component as a slot through a wrapper component to be rendered within a repeated html markup structure. For some odd reason, if we us a simple wrapper around our component which contains the slot, we stopped seeing issues. Maybe something to do with state transfer when using slots. I think our work around isolates that.
https://github.com/kiva/ui/pull/651/files

[drpeck]

Not sure I can put together a sandbox because our routing implementation is pretty complex. What I would add is that our issue was specific to the refinement list only. It seemed to retain it's initial load state and restore it under certain conditions.

[Haroenv]

@mcstover, fix for your first sandbox: https://codesandbox.io/s/5zkwwmq7mp

[Haroenv]

An inline object/array (non-primary value) in Vue will always cause the children to rerender, and in the case of our widgets, lose state

[mcstover]

Thanks @Haroenv for the insight and explanation! I'll seek to avoid that type of declaration in the future.

[Haroenv]

I’ll close this issue, but thi has come up many times now. I wonder if we can find a long term solution by e.g. only documenting usage via this.data

[mcstover]

@Haroenv I did see that the inline array is currently used in the docs. Probably not an issue for everyone but certainly for some.
https://www.algolia.com/doc/api-reference/widgets/refinement-list/vue/?language=js#widget-param-sort-by

[Haroenv]

Yes, that's what I meant. When writing the docs we assumed people knew about that tradeoff (simpler to show, can give bugs). There's already an open issue to deal with that: #575.