RA v4: List filters freeze with react-hook-form >= 7.55

[magalimarchand]

Using the List component filters property, when I click on the filter textbox input, my page freezes completely and is unresponsive, I have to close the web page. I use the 4.16 React Admin version, and would like to use Next v14.2. Is it compatible, is there a workaround?

[fzaninotto]

Please follow the issue template.

[saloua-ch]

Hi @magalimarchand ,I saw your issue and thought I’d try to help. I put together a version based on what you described feel free to tweak it and edit it this issue if it helps.

What you were expecting: Using the filters prop of the List component with a text input should work without freezing the page.

What happened instead: When I click on the filter textbox input, the page freezes completely and becomes unresponsive. I have to close the tab to recover.

Steps to reproduce:

1/Use React-Admin v4.16 with Next.js v14.2

2/Add a List component with a filters prop using a text input

3/Run the app and try to click the filter input

Related code:

• Preferably, a sandbox forked from

  • https://codesandbox.io/p/github/marmelab/react-admin-sandbox/main (v5)

  • https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple (v5)

  • https://stackblitz.com/github/marmelab/react-admin/tree/4.x/examples/simple (v4)

• A link to a GitHub repo with the minimal codebase to reproduce the issue

insert short code snippets here

Other information:

Happens specifically when combining React Admin 4.16 and Next.js 14.2

Downgrading Next.js hasn’t been tested yet

Not sure if it happens with other filters

Environment

• React-admin version: 4.16.0
• Last version that did not exhibit the issue (if applicable):
• React version: (your version here)
• Browser: (Chrome, Firefox, etc.)
• Stack trace (in case of a JS error):

[fzaninotto]

Thanks @saloua-ch. In addition to these details, we'll need a reproduction (codesandbox, stackblitz, or a public repo that we can clone and run).

[TCM5]

This behavior is also being triggered with vite.The UI freezes when a filter is selected.

[fzaninotto]

@TCM5 again, can you please provide a reproduction?

[TCM5]

@fzaninotto I'm trying to debug this, but it seems to be related to conflicting versions.

Here’s the warning I'm getting in the console:

Warning: Cannot update a component (`FilterForm`) while rendering a different component (`ForwardRef(ButtonBase2)`). To locate the bad setState() call inside `ForwardRef(ButtonBase2)`

Related with this filter for example.

const Filters = [
  <TextInput
    label="ra.action.search"
    source="q"
    alwaysOn
    resettable
    helperText={false}
  />,
];

[fsdesa]

This behavior is also being triggered with vite. Using text box as a filter and Reference too

[fzaninotto]

Please don't comment with a "me too" on an issue without reproduction. If you want this issue to receive attention from the core team, please provide a reproduction.

[aleksandar-sokolov]

Hi @fzaninotto ,

I'm experiencing the same issue with the app freezing when using React-Admin v4.

Here's a reproduction in StackBlitz: 🔗 https://stackblitz.com/edit/github-o4fkpnms?file=package.json

Steps to reproduce:

Open the list view.

Click on a filter input.

The entire app freezes, and the browser tab becomes unresponsive.

Environment:

React-Admin versions tested: v4.0.3, v4.16.0

Yarn: v1.22.22

Tested with multiple Node.js versions

Let me know if you need more details. Thanks!

[slax57]

Thanks @aleksandar-sokolov . I managed to reproduce.

Further analysis show that this issue is due to the latest react-hook-form versions, more specifically RHF >= 7.55.0.

Downgrading RHF to version 7.54.2 seems to solve the issue. So you can use that as a workaround until someone figures out a fix.

Additional info: RHF v7.55 also introduced some bugs with filters in react-admin v5. They were addressed in these PRs:

• https://github.com/marmelab/react-admin/pull/10657
• https://github.com/marmelab/react-admin/pull/10697

UPDATE: I took the liberty to rename the issue to better reflect the root cause, since apparently it has nothing to do with Next in the end.

[fzaninotto]

To be clear, this bug is fixed in react-admin v5, and you can circumvent it in react-admin v4 by downgrading react-hook-form to 7.54.2.