How to use underlay with usePopover?

[daron81]

I'd like to understand how to use the underlay with a popover created using usePopover. I have tried adding and removing a div that has the underlayProps returned by the hook.

It doesn't seem to make any difference whether the underlay is present or not. In both cases, scrolling is disabled, but I can still interact with elements on the rest of the page.

Thanks in advance.

[LFDanLu]

Do you mind sharing a codesandbox? https://react-spectrum.adobe.com/react-aria/usePopover.html#example has a good example of including a div with the underlayProps passed to it and it prevents interactions with elements on the page when the popover is opened (e.g. hovering rows in the table of contents doesn't cause their hover style to be applied, and it takes two click to actually interact with them, one to close the popover and one to actually click the row item)

[snowystinger]

One thing to make sure of is that your underlay actually covers the screen and isn't rendering as a 0px width and height div in the corner.