Vue-instantsearch: HitsPerPage doesn’t work correctly with routeToState()

[joshangell]

Bug 🐞

What is the current behavior?

• Use the ais-hits-per-page component as described in the docs
• Then set up the routing as per the "User-friendly URLs" section detailed here: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/js/#user-friendly-urls
• Using the widget updates the UI state correctly and also updates the URL
• Reloading the page sets the state correctly but doesn’t update the UI of the widget

Make a sandbox with the current behavior

Sandbox example: https://codesandbox.io/embed/vueinstantsearchv2starter-8jx9i

What is the expected behavior?

The dropdown should reflect the selected option in the URL when you have selected something other than the default and then reloaded the page.

Does this happen only in specific situations?

What is the proposed solution?

Unsure!

What is the version you are using?

v2.1.0

[francoischalifour]

Thanks for the bug report.

The issue likely comes from the HitsPerPage component that doesn't pre-select the current refinement, as opposed to the SortBy component.

[joshangell]

Aha, so if I were to have a crack at a PR for this would using SortBy as a guide be the simplest way forward?

[francoischalifour]

Yes, it would be!

[drpeck]

In addition to not setting the correct value, I've found that the router only updates for changes to the value set at page first load.
E.g. Page loads at /search?hitsPerPage=20, when you select 10 the url changes to /search?hitsPerPage=10, when you select 20 again the url changes to /search.

[drpeck]

Setting the initial page loaded value can be achieved by:
<ais-hits-per-page :items="hitsPerPageOptions" />
and

data(){
return {
hitsPerPageOptions: [
        { label: "8 results", value: 8, default: this.$router.currentRoute.query.hitsPerPage != 16 },
        { label: "16 results", value: 16, default: this.$router.currentRoute.query.hitsPerPage == 16 }
      ]
}}

[Haroenv]

Thanks for writing this workaround @drpeck