tailwindlabs
`<Listbox>` error: `Uncaught Error: Maximum update depth exceeded.`
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v2.2.0
What browser are you using?
Chrome 129.0.6668.59
Reproduction URL
- https://codesandbox.io/p/devbox/headlessui-listbox-uncaught-error-forked-jgqn4t
- https://jgqn4t-5173.csb.app/
Describe your issue
We've noticed the following error on the production version of our app: https://react.dev/errors/185?invariant=185
Local error message:
To reproduce it (on macOS) you need to be using a mouse that isn't a Magic Trackpad/Mouse, or set the "Show scroll bars" option in Settings to "Always":
Steps to reproduce:
- Open the listbox and select an option (e.g. the first one).
- The application should crash.
Worth mentioning that you can prevent the error from occurring by either of the following options:
- Removing the
overflow-autofrom the element on L6. - Commenting out the label on L8.
FYI I've made some minor changes to the codesandbox and repro steps to make it simpler, and ensure that the error always occurs.
We have the same issue, but it's so random I can't give a way to reproduce it.
I wasted three hours on this and in the end it doesn't look like I screwed anything up, so you can probably replicate the ListBox functionality with a Menu and Transition and you won't have this problem.
I wasted three hours on this and in the end it doesn't look like I screwed anything up, so you can probably replicate the ListBox functionality with a Menu and Transition and you won't have this problem.
@RobinMalfait @reinink
We have the same issue, it looks like the problem starts when the listbox options overflow the window, using portal (<Listbox.Options anchor="bottom" />) seems to resolve the problem for us.
We also have the same issue. In our case, we notice it only happens on Windows device and remove transition prop from ListboxOptions will fix it.
Same issue here. Using v2.2.0. This error is happening on a Listbox with about 200 options, but not on ones with much smaller lists. The only "solution" I've found was to remove the Transition wrapping the ListboxOptions.
In my case, the "Maximum depth exceeded" error happens once a selection is made on any option on a Listbox with 152 options. Only by removing the transition prop or setting its value to false, does the issue go away.
Also using v2.2.0 of the react package.
I'm observing the same issue with v2.1.9 so its not related directly to v2.2.0.
I believe this comes down: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/listbox/listbox.tsx#L1041 where setLocalOptionsElement is supplied to the useSyncRefs function which sets the state directly in the render function.
This was introduced in this commit: https://github.com/tailwindlabs/headlessui/commit/071aa0e260603997f21894c7781b6e7f6f21d996#diff-cb335fbe544f778130fb8f7c8eeb065f05c0038ade35c572cbfee6c35dac05a5
@RobinMalfait
I am using v2.2.0 as well. Adding static to <ListboxOptions /> seems to prevent the issue
We have the same issue, it looks like the problem starts when the listbox options overflow the window, using portal (
<Listbox.Options anchor="bottom" />) seems to resolve the problem for us.
I can confirm I encountered this issue today with both versions 2.2.2 and 2.2.3. It only occurs when ListboxOptions overflows the window and the transitions prop is enabled or the component is wrapped in a Transition.
Hey!
This should be fixed by #3782, and will be available in the next release.
You can already try it using:
npm install @headlessui/react@insiders.
This is fantastic work. Thank you @RobinMalfait. Looking forward to testing this solution. At the moment, we've been handling this issue by setting the transition prop to be false by default. While this ensures the uncaught error of maximum depth exceeded does not occur, enabling transitions on all ListBox components would create a more fluid UI/UX for our users.