Stacking / z-index issue when using Base UI components inside Radix Dialog

[ozgurozalp]

Bug report

Current behavior

When I use Base UI components inside a Radix Dialog, I encounter an interaction issue.
For example, when placing a Combobox from Base UI inside the dialog, the dropdown list visually appears in front of the dialog, but I can’t select any items from it.

Reproducible example

codesandbox

Base UI version

"@base-ui-components/react": "^1.0.0-beta.3",
"@radix-ui/react-dialog": "^1.1.15",

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

[mj12albert]

@ozgurozalp Looks like it's being blocked by Radix's DialogOverlay:

The container prop on ComboboxPortal can be used to portal the popup inside the dialog, here's a working sandbox: https://codesandbox.io/p/sandbox/friendly-mirzakhani-596rh2

[ozgurozalp]

@ozgurozalp Looks like it's being blocked by Radix's DialogOverlay:

The [`container` prop](https://base-ui.com/react/components/combobox#ComboboxPortal-container) on ComboboxPortal can be used to portal the popup inside the dialog, here's a working sandbox: https://codesandbox.io/p/sandbox/friendly-mirzakhani-596rh2

This solves the problem in this way, but it feels like it might cause other issues :/

[atomiks]

There may be some issues with CSS clipping when portaling it inside, but ultimately there's not much we can do if the interoperability problem is caused by something other than Base UI itself (where it's the other library making things a problem.)

Given Radix's Dialog is largely the same as our one, I don't see why migration to Base's Dialog is difficult in this case.

[ozgurozalp]

There may be some issues with CSS clipping when portaling it inside, but ultimately there's not much we can do if the interoperability problem is caused by something other than Base UI itself (where it's the other library making things a problem.)

Given Radix's Dialog is largely the same as our one, I don't see why migration to Base's Dialog is difficult in this case.

You’re right, I could switch to Base UI’s dialog, but I don’t think everyone can make that change right away. I think it would be much better for the community if Base UI itself could come up with a solution for this.

[sarthak-simpplr]

I am facing the same issue and yes the containerRef workaround works.

Is there a way Combobox.Popup can be rendered without being in a portal? In that case, even if inside a Radix Dialog, its position would be relative to the Dialog?

[atomiks]

I took a closer look as the Sandbox broke for me earlier, and the problem isn't that hard to workaround, but with a major caveat.

The main issue is Radix applies pointer-events: none to the entire body, so the combobox positioner/popup aren't interactive. If you set pointer-events: auto on the Positioner/Popup elements, everything is fine in terms of pointer interactivity of the items (provided each popup has the same z-index).

That said, I'm still not able to scroll the combobox popup maybe because of Radix's scroll lock, where it only allows things inside the dialog to be scrolled. In which case the portal container solution is the only thing that really works properly.

If the interoperability issue is caused by another library, you probably need to make an issue there. (And I know Radix is very unresponsive, that's why migrating is probably the only thing that is going to work if the scroll issue can't be solved)

Is there a way Combobox.Popup can be rendered without being in a portal? In that case, even if inside a Radix Dialog, its position would be relative to the Dialog?

The portal is not a relevant problem here if you're using container and placing it inside the dialog as well. It achieves the same DOM layout (with one extra wrapper) as not having a portal at all.