Z-index issues when combining Dialog.Portal with Popover, Dropdown, etc.

Bug report

Current Behavior

After switching over to the new <Dialog.Portal>, I’m having issues maintaining a proper z-index order for dialogs that are initiated from Popovers or Dropdown menus.

A use case for this might be a “Delete” option in a DropdownMenu. The user opens a dropdown, clicks “Delete”, and then a Dialog prompts them to confirm. We choose to keep the dropdown list open while the dialog is on screen.

With the current behavior, the dropdown list renders above the dialog’s overlay because the dialog’s portal seems to be using a new system that doesn’t set a value for “z-index”, but Popovers and DropdownMenus are using radix-portal, which sets 2147483647.

Expected behavior

I would expect portals to layer in the order in which they are made visible. So if a Popover opens a Dialog, the Dialog should layer on top. If a Dialog opens a Popover, the Popover should layer on top.

Reproducible example

https://codesandbox.io/s/dreamy-curie-1rc2tf?file=/src/App.tsx

Suggested solution

Add documentation about how we can achieve this with the new Dialog API, if it’s possible.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog, @radix-ui/react-popover	0.1.7, 0.1.6
React	n/a
Browser	Chrome	100
Assistive tech
Node	n/a
npm/yarn
Operating System

[benoitgrelard]

Hey @mattp0123,

With that, we trialed the idea of exposing the portal part in Dialog which no longer sets any z-index so you have full control as a user. The reception has been good and so we will roll it out to all the other relevant components soon (https://github.com/radix-ui/primitives/issues/1302, https://github.com/radix-ui/primitives/issues/1303, https://github.com/radix-ui/primitives/issues/1304, https://github.com/radix-ui/primitives/issues/1305, https://github.com/radix-ui/primitives/issues/1306).

All the improvements suggested above have been made, they are available in the latest release candidates, not public yet. But if you update your example to use the latest RCs for Popover and Dialog and add the new Popover.Portal part (just like the dialog one) then it should just work out of the box (and if you need more control, you can now set your own z-index as we don’t set any).

Side node: I noticed you used asChild and then attached styles to divs, etc. You can pass your styles directly to the part, and not use asChild too. All the parts render an element by default. asChild is there mostly for composition or ability to change the tag types in some fringe cases.

[mattp0123]

@benoitgrelard Hi. So what am I supposed to do to make the dialog on top of the popover? Can they share the div[data-radix-portal]? https://codesandbox.io/s/dialog-inside-popover-m09fmx?file=/src/App.tsx