search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

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

Closed mohammadhosseinmoradi closed 2 weeks ago

mohammadhosseinmoradi commented 2 weeks ago

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 commented 2 weeks ago

Hey!

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

You can already try it using:

mrlubos commented 4 hours ago

@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.