Question regarding "history" router and the "cleanUrlOnDispose" parameter

[lassereinboeng]

Hi everyone 😊

I have a question regarding the cleanUrlOnDispose paremeter in the history router.
This is the explanation from the docs:

This option controls whether the URL is cleaned up from active refinements when the router is disposed of. It’s useful when the search experience is in a modal, to remove query parameters from the URL when the modal is closed.
Source

As I understand the passage from the docs, when cleanUrlOnDispose is set to false, the browser should keep the query and filter URL, even if the instantsearch instance is disposed. Am I right?

We are currently building an Algolia search application inside a Bootstrap Offcanvas. When users open the offcanvas, the instantsearch instance inits/starts. When users close the offcanvas, the instantsearch is disposed.
We want the user's query and refinements to be remembered, e.g. by keeping the search parameters in the URL. So, if users reopen the offcanvas, they can continue searching and filtering with their query and refinements.
But, even with setting

routing: {
  router: history({
    cleanUrlOnDispose: false,
  }),
},

on the instantsearch instance, the search params are removed from the URL. So, with my understanding, the cleanUrlOnDispose parameter has no effect here? I am on instantsearch.js version 4.73.2 btw.
I might just not dispose the instantsearch instance, but from what I learned, I consider it best practice to dispose it and to remove all widgets and EventListeners on close.

Is there any (other) built-in way to remember the query and refinements?

Thank you and have a great week!
Lasse

[Haroenv]

That's indeed one of the use cases of this option, although the main one is to prevent a duplicate empty history entry when both InstantSearch disposes (writes empty url) and then an SPA router writes the next URL. Your use case should also be covered with that, unless maybe something else is also interacting with the URL at the same time as the offcanvas. Do you have a reproduction, as normally this should work fine

[lassereinboeng]

@Haroenv Thanks for your quick response, appreciate it!
Good to know that InstantSearch writes an empty URL on dispose. That could be a hint to track it down.
I tried two different things in the meantime:
When I log the current URL on the router's dispose() function, like this

routing: {
  router: history({
    cleanUrlOnDispose: false,
    dispose() {
      console.log(window.location.href);
    },
  }),
},

the URL still has the query and refinements in it. So far so good. But still, after a second or so, the URL is cleaned.
What might be interesting as well: When I dispose the InstantSearch instance manually without closing the offcanvas (e.g. from the Browser's console), it does the same and cleans the URL. So, the Bootstrap offcanvas should also not be the problem's cause.

Because of the project's size and specific requirements, I think it's not easy to create a small reproduction repo. Or what would you need to further understand the issue?
Thanks again!

[Haroenv]

I actually manage to reproduce it now in a blank InstantSearch implementation, seems like the option is not taken in account. Will debug and try to fix

[lassereinboeng]

Ah, glad you were able to reproduce it. If I can help with anything, just let me know 😊

[Haroenv]

I've found the cause now (not sure why this wasn't noticed yet, related to timers I believe), so you can try out #6305 which I think will be merged and released soon

[lassereinboeng]

Thank you very much @Haroenv 😊🙏

[lassereinboeng]

@Haroenv Was able to test the new release in our project now. Seems to be working fine now :-) Thanks again!

[Haroenv]

Thanks for noticing this oversight 👍