algolia / algolia/instantsearch

Routing is not working while a custom onStateChange props is defined

Open
#6,087 0 comments 0 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
4.1k
Forks
553
Avg merge
1d 11h
Merged PRs (30d)
51

Description

### 🐛 Current behavior

When we define a custom `onStateChange` props, url query params are not "set" on load via `routing={true}`.
If not, `routing={true}` works as expected with default query params

At load:

With `onStateChange={({ uiState, setUiState}) => setUiState(uiState)} routing`
Screenshot 2024-03-15 at 09 32 59

With `routing`
Screenshot 2024-03-15 at 09 33 51

Seems related to https://github.com/algolia/instantsearch/issues/4795

CodeSandbox sample:
https://codesandbox.io/p/sandbox/hungry-borg-tkntsx?file=%2Fsrc%2FApp.tsx

### 🔍 Steps to reproduce

1. Set a `` component in your page, with some widgets like `refinementList` or other
2. Set a `initialUiState` props (ex: `initialUiState={{ 'YOUR_INDEX': { refinementList: { ATTRIBUTE: ['VALUE'] } }}`
3. Set a custom `onStateChange={({ uiState, setUiState }) => setUiState(uiState)}` props

### Live reproduction

https://codesandbox.io/

### 💭 Expected behavior

We expect to see url params reflecting our uiState, even if we set a custom `onStateChange` props on `InstantSearch` component.

### Package version

react-instantsearch v7.7.0

### Operating system

_No response_

### Browser

_No response_

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox and reproduce the interaction between InstantSearch routing, initialUiState, and a custom onStateChange callback. Trace how the uiState is applied on load and how URL query parameters are updated. Done means the URL reflects the initial uiState when routing is enabled, both with and without the custom callback.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.