Using unmount={false} on Transition inside Menu make Transition unappear

[MKlblangenois]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: v1.7.13

What browser are you using?

For example: Brave / Firefox / Safari

Reproduction URL

Stackblitz reproduction : https://stackblitz.com/edit/react-ts-fsfrop?file=App.tsx

Describe your issue

When I'm using <Transition unmount={false} /> inside <Menu>, the transition element will never appear, even in DOM.

[b3nk3]

I came across something similar - you need to add unmount={false} to <Menu.Items ...props /> on line 33 too, not just the transition.

[thecrypticace]

Hey! So the unmount property in any of your components applies to behavior of the component itself.

For a Transition, unmount={false} only makes sense by itself when as is NOT Fragment because there's a element in the DOM—specific to Transition—that can be controlled. In this case you are going to want to put unmount={false} on both the Transition and Menu.Items as @b3nk3 pointed out. The reason is that <Transition unmount={false}> says "render my children no matter what" to just the <Transition> component. While <Menu.Items unmount={false}> says "render the ul for my menu no matter what" and these are independent decisions which is why you want both.

Hope that helps! ✨