Transition as={Dialog} with unmount={false} does not render or animate

[Dashice]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: v1.7.15

What browser are you using?

For example: Chrome, Safari, Polypane

Reproduction URL

https://codesandbox.io/p/sandbox/sharp-sound-53snkd?file=/src/App.jsx:8,70

Describe your issue

When using <Transition as={Dialog} unmount={false} />, the unmount does not behave correctly. Firstly, it does not appear on the page at all, when show is set to true. Secondly, the DOM elements of the Panel are not present.

When using on the other hand:

<Transition as={Fragment} unmount={false}>
   <Dialog unmount={false}>
      ...
   </Dialog>
</Transition>

... it does work and animates as expected.

Narrowing it down further. If <Transition as="div" unmount={false} /> is used instead (notice as being a div, over a Dialog), it works as expected. If you also use unmount={true}, it works as expected as well. regardless of the value of as.

It appears that the combination of <Transition as={Dialog} unmount={false} /> specifically, causes strange behavior.

Real life use case
I am building a Navigation menu in the form of a Dialog, which needs to unmount={false} for SEO purposes as even the desktop menu uses this Dialog. In my use-case, I need focus-trapping. This Dialog appears as a drawer, sliding in from the side, with swiping gestures for dismissal.

I could naturally use Popover here; but then I would not get the same focus management.

See my CodeSandbox above for a relatively clean example of this strange behavior in-action.

[thecrypticace]

Hey! Dialog uses props and context internally that communicates with transition context to determine when to open/close. Setting as={Dialog} is probably going to break this communication depending on where things end up in the component tree. Additionally, we'd probably need to make sure traverse descendants inside of components that are not fragments. All that to say, the only supported method here is to nest <Dialog> inside <Transition> like in your working example in the code sandbox.

You mention SEO but something to note is that <Dialog> is generally meant for transient content — edit modals, confirmation dialogs, notifications that require confirmation, search modals, sometimes a mobile nav that is otherwise already available on the page, etc… So it's possible that <Dialog> isn't the right thing to use here accessibility-wise (but I'm not 100% certain here).

More specifically though, I'd like to know what's the reasoning behind trying to use as={Dialog} rather than the nested version given that it works and is mounted on page load (screenshot below)?