Maximum update depth exceeded due to Transition

[username14415]

I do not know why but in some cases I get Maximum update depth exceeded error due to Transition

import { Menu, MenuButton, MenuItems, MenuItem, MenuSection, MenuSeparator, Transition } from "@headlessui/react";
<Transition enter="dropdown-menu-enter transition ease-out duration-75" enterFrom="dropdown-menu-enterFrom" enterTo="dropdown-menu-enterTo" leave="dropdown-menu-leave" leaveFrom="dropdown-menu-leaveFrom" leaveTo="dropdown-menu-leaveTo">
...
</Transition>

I use the latest 2.2.0 react version I've found similar issue: https://github.com/tailwindlabs/headlessui/issues/3476#issuecomment-2620026394

[romaincapelle]

@username14415 I have had the same issue but for m1 mac user only. I delete all the transitions that were causing issue ( the one around Listbox ) I kept transition that were not causing an issue

[KeAnLL]

@username14415 I'm also having the similar issue. Takes some times to troubleshoot it.

For my case, I'm not using Transition component here in my Listbox component. However, I have the transition flag in the ListboxOptions which also cause the same issue you described here (see it in the attached screenshot). I disabled it by commenting it out.

Hope this helps you and other peers that are reading this thread.

[mike667]

I have the same issue on my MacBook M1 Pro when using transition together with a select. When I add more than 7 options, I get a React error saying "Maximum update depth exceeded." I can't find any consistent pattern. Could this be related to the new React compiler?

[mikorecare]

@username14415 I'm also having the similar issue. Takes some times to troubleshoot it.

For my case, I'm not using Transition component here in my Listbox component. However, I have the transition flag in the ListboxOptions which also cause the same issue you described here (see it in the attached screenshot). I disabled it by commenting it out.

Hope this helps you and other peers that are reading this thread.

Thanks a lot. This actually fix the error. I have to remove the transition on my component as well.

[cwasyl]

Fails for me as well with transition property - but it only happens when the Listbox is at the bottom of the page and opening it causes the page height to change. When an item is chosen, and it tries to reset the page to the original height, "Maximum update depth exceeded.".

If I move the control up the page when it doesn't need to scroll, with transition enabled, no problems.

[agustinglez]

+1 Had the same issue putting Listbox inside Dialog. Only happen when remove "absolute" class name in ListboxOptions. I removed the "transition" and now works well.

But it's a problem.

[lazarst96]

I have the same issue using Listbox inside Dialog and yes only happens when "transition" property is set to true. With version 2.2.7

[Ape]

We had this same issue on MenuItems inside a Transition. It was fixed either by removing the Transition (losing the animation), or by adding umount={false} on the MenuItems.

[ericalli]

Same issue here using the <ListBox> component, removing the transition prop fixes the issue, otherwise a Maximum update depth exceeded error is observed.

[RobinMalfait]

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.