[Dialog] Popup can't be nested in the Backdrop part

[vladmoroz]

Summary

Nesting Popup in Backdrop currently ejects the Popup outside of the Backdrop:
https://codesandbox.io/p/sandbox/still-resonance-forked-tzyjgp

It doesn't match what you author, which feels unexpected.

In a practical sense, this is problematic for a couple reasons:

1. Some apps, e.g. Trello, use scrollable backdrops to show as much content as possible in the viewport. See "Long dialog" on this Radix Themes test page.
2. This makes migration from Radix non-trivial, as Radix allows nesting its Dialog.Content in Dialog.Overlay

Search keywords

dialog, popup, backdrop, trello, scroll

[michaldudak]

Both Popup and Backdrop are portaled, so they are rendered differently than defined in source code. No matter what you wrap around the Popup, it won't end up being around it in the resulting DOM:

<Dialog.Backdrop>
  <Dialog.Popup />
</Dialog.Backdrop>

// behaves the same conceptually as:

<div>
  <Dialog.Popup />
</div>

I understand the Backdrop->Popup case is more special, and I can think of two solutions:

1. We detect when a Popup component is placed inside a Backdrop and disable its portal in such cases. This will also affect popups that are nested within the original popup.
2. We introduce the disablePortal prop on the Popup that lets developers explicitly state their intent.