Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Listbox> error: Uncaught Error: Maximum update depth exceeded. #3562

Open
breadadams opened this issue Nov 18, 2024 · 6 comments
Open

<Listbox> error: Uncaught Error: Maximum update depth exceeded. #3562

breadadams opened this issue Nov 18, 2024 · 6 comments

Comments

@breadadams
Copy link

breadadams commented Nov 18, 2024

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

Describe your issue

We've noticed the following error on the production version of our app: https://react.dev/errors/185?invariant=185

image

Local error message:

image

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":

image

Steps to reproduce:

  1. Open the listbox and select an option (e.g. the first one).
  2. The application should crash.

Worth mentioning that you can prevent the error from occurring by either of the following options:

  • Removing the overflow-auto from the element on L6.
  • Commenting out the label on L8.
@breadadams
Copy link
Author

FYI I've made some minor changes to the codesandbox and repro steps to make it simpler, and ensure that the error always occurs.

@RobinBressan
Copy link

We have the same issue, but it's so random I can't give a way to reproduce it.

Capture d’écran 2024-11-21 à 22 59 39

@LianZiZhou
Copy link

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.

@LianZiZhou
Copy link

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

@ebeigarts
Copy link

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.

@TrustyTechSG
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants