URL routing is not working while a custom onStateChange function is defined

[JJWesterkamp]

🐛 Bug description

When using the custom onStateChange() implementation together with URL routing the router is not called upon UI state changes.

🔍 Bug reproduction

Steps to reproduce the behavior:

1. Enable basic URL routing
2. Observe the URL being updated upon state changes
3. Now add a custom onStateChange() function
4. Observe the URL no longer being updated upon state changes

Live reproduction

Without custom onStateChange() everything works as expected:

https://codesandbox.io/s/inspiring-carson-tc2sv?file=/src/app.js:215-291

Enable the custom onStateChange() and the router stops working:

https://codesandbox.io/s/inspiring-carson-tc2sv?file=/src/app.js

💭 Expected behavior

The router is expected to work identically, based on the router configuration, when a custom onStateChange function is either defined or not.

Environment

• OS: macOS
• Browser: Chrome
• Version: 4.24.0-experimental-typescript.0

[tkrugg]

Hi @JJWesterkamp thanks for reaching out, and providing an example.
Thats looks like a regression.

@algolia/instantsearch-for-websites we should file bug for this one.
I've reproduced it in this integration test https://github.com/algolia/instantsearch.js/compare/chore/regression-test-onstatechange-middleware
As a workaround for @JJWesterkamp, can we suggest using one of the following?

onStateChange({ uiState, setUiState}) {
    setUiState(nextUiState)

    // add this
    this.middleware.forEach(({ instance }) => {
      instance.onStateChange({
        uiState: nextUiState,
      });
    });
}

[JJWesterkamp]

@tkrugg Thanks for your reply. The workaround does the trick for now, thanks again!