RefinementList in React portal with `transformItems` defined removes URL parameters when portal is closed

[Matt Pedersen]

🐛 Current behavior

With a RefinementList in a portal-based modal, if I have the transformItems prop defined (even if it doesn't do an transformation), applying a refinement then closing the modal causes the added query parameters to be removed from the URL. Without transformItems defined, the URL remains intact.

🔍 Steps to reproduce

1. Go to bug reproduction sandbox
2. Click on the filter button underneath the search bar to open the filter modal
3. Apply one or more brand refinements (notice the URL is updated with appropriate query params)
4. Click on the close button within the modal to close the modal (notice the query params disappear from the URL)

Live reproduction

https://codesandbox.io/s/algolia-react-instantsearch-portal-transformitems-mjt7lk?file=/src/App.js

💭 Expected behavior

When a <RefinementList> with a transformItems is placed inside a React portal modal, closing the modal should not remove the query parameters added to the URL through the RefinementList.

Package version

instantsearch.js 4.56.8, react-instantsearch 7.0.0, react 18.2.0

Operating system

macOS 13.5.1

Browser

Chrome 116.0.5845.110

Code of Conduct

• I agree to follow this project's Code of Conduct

[Dhaya]

Hi, thanks for reporting this. It seems to happen even when the widget is not inside a portal, as a simple state change seems to undo active refinements. We'll look into this and let you know once we have a fix.

EDIT: Nevermind, I haven't noticed you inline the transformItems method, which makes the component unstable. You should declare your method outside of your component, as shown in the API reference: https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/#widget-param-transformitems.

[Matt Pedersen]

Thank you for the quick reply @dhayab ! Declaring transformItems outside of the component does indeed avoid the issue. It looks like wrapping the function in useCallback also works if we need to declare the function inside the component (in the case where we need access to other component state maybe?)

[Dhaya]

Yes, you can also wrap your transform function with useCallback() to make a stable reference that can be safely passed to the widget.