Maximum update depth exceeded when using MenuButton with `as={Fragment}`

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 using MenuButton with `as={Fragment}` #3439

Closed faebeee closed 2 weeks ago

faebeee commented 1 month ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.1.3

What browser are you using?

Any

Minimal Repro Sandbox

You can use one of the starting projects on CodeSandbox:

Describe your issue

When using the MenuButton with the as={Fragment} property, I end up with a "Maximum update depth exceeded" Error

serafxxx commented 1 month ago

same for ComboboxInput

jcypret commented 3 weeks ago

We're seeing this as well starting with @headlessui/react v2.1.4 and also in the latest version v2.1.5:

Hitting the same error as @faebeee specifically related to as={Fragment} on MenuButton. If we drop the as or change it to something else like as="div", it works.

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:

npm install @headlessui/react@latest.