Provision to style underlay for popover.

[NarendraKuruva]

I'm using Popover from react-aria-components
In my case I'm opening a popover on top of another popover, the first popover underlay is working fine and I'm not able to interact with other elements on screen. but when the nested popover is opened, I'm able to interact with the content in popover this.

I tried

isolation: isolate;

to the id="root" also, this one also didn't work for me

Any help in this is appreciated.

@devongovett @snowystinger Any ideas on this

[NarendraKuruva]

@devongovett @snowystinger @LFDanLu

Can you help me with this?

[LFDanLu]

Do you have a codesandbox that you can share perhaps?

[snowystinger]

dupe of #5231 ?

[NarendraKuruva]

@LFDanLu ,
Sorry for the delay. I was on vacation. so couldn't check.

Here is a codesandbox of my use case:
https://codesandbox.io/p/sandbox/serverless-worker-hqt8tr?file=%2Fsrc%2FTesting.tsx%3A37%2C17

In this, When I click on Settings 2 button which is in the 1st popover, the nested 2nd popover is opening.

And when the nested popover is open, I'm still able to interact with the content in the 1st popover (I'm able to click the Settings 2 & My Profile buttons ).

[LFDanLu]

As @snowystinger mentioned this is related to #5231. Ideally we'd give you an api to customize the Popover's overlay/underlay so that either you could do away with the z-index applied to the Popover by default in favor of an isolation: isolate strategy and thus this popover nesting would work by default or you'd be able to customize the overlay/underlay itself and use whatever strategy you'd want to ensure the last Popover overlays all other content.

As a workaround for now, you'll have to target the underlay via their classname specifically I believe and apply a similar z-index that the popovers currently have which isn't great. Ideally either the Popover would be wrapped in a overlay div which would have isolation: isolate IMO. We'd be happy to accept a contribution to implement what is described in the above mentioned issue