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.

Sign up for GitHub

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

Jump to bottom

Maximum update depth exceeded" when rendering <MenuButton> as Fragment #3476

Closed
mohammadhosseinmoradi opened this issue Sep 11, 2024 · 2 comments · Fixed by #3478
Closed

Maximum update depth exceeded" when rendering <MenuButton> as Fragment #3476

mohammadhosseinmoradi opened this issue Sep 11, 2024 · 2 comments · Fixed by #3478
Assignees
@RobinMalfait

Comments

@mohammadhosseinmoradi
Copy link

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
v2.1.7

What browser are you using?
Chrome

Describe your issue
This issue appears to be triggered when the MenuButton is wrapped in a Fragment.

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
<Menu>
  <MenuButton as={Fragment}>
    <button>Menu</button>
  </MenuButton>
</Menu>
@RobinMalfait RobinMalfait self-assigned this Sep 11, 2024
RobinMalfait added a commit that referenced this issue Sep 12, 2024
@RobinMalfait
fix infinite loop when using <MenuButton as={Fragment}>
7b8f5f1 
Fixes: #3476
Fixes: #3439
@RobinMalfait RobinMalfait mentioned this issue Sep 12, 2024
Merged
RobinMalfait added a commit that referenced this issue Sep 12, 2024
@RobinMalfait
fix infinite loop when using <MenuButton as={Fragment}>
748ca34 
Fixes: #3476
Fixes: #3439
RobinMalfait added a commit that referenced this issue Sep 12, 2024
@RobinMalfait
Fix crash when using as={Fragment} on MenuButton, ListboxButton…
b670896 
…, `DisclosureButton` or `Button` components (#3478)

This PR fixes an issue where a maximum update depth exceeded error was
thrown when using `as={Fragment}` on button related components.

The issue here is that the `ref` on a element would re-fire every render
_if_ the a function was used _and_ the function is a new function (aka
not a stable function).

This resulted in the `ref` being called with the DOM element, then
`null`, then the DOM element, then `null`, and so on.

To solve this, we have to make sure that the `ref` is always a stable
reference.

Fixes: #3476
Fixes: #3439
@RobinMalfait
Copy link
Member

Hey!

This should be fixed by #3478, and is available in the latest release (2.1.8).

You can already try it using:

  • npm install @headlessui/react@latest.

@mrlubos
Copy link

mrlubos commented Oct 1, 2024

@RobinMalfait there's another edge case I found related to this I believe, here's a video https://youtu.be/wVMtqbnkF4o

Notice when I open and close the menu, everything is fine. When it's open however, it expands the scrollable area. If I scroll to this "new" area and then close the menu, the error occurs. This is an edge case because it happens only when the scroll area expands as far as I can tell. This issue has existed for a long time too, it's not specific to 2.1.8.

@benface benface mentioned this issue Oct 4, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RobinMalfait RobinMalfait

Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@RobinMalfait @mrlubos @mohammadhosseinmoradi