Events propagate through Portals in Overlay elements

[adidahiya]

Environment

• Package version(s): core v4.18
• Operating System: macOS
• Browser name and version: Chrome

Code Sandbox

https://codesandbox.io/p/sandbox/awesome-mountain-njbt9k?file=%2FREADME.md

Steps to reproduce

• Render a <Dialog> on top of an interactive element.
• Interact with the background element through the Dialog.

Actual behavior

Events bubble through React Portals as per the docs

See facebook/react#11387

Expected behavior

There should be a way to capture all events in Portals, preventing them from propagating to the rest of the DOM.

Possible solution

1. add a boolean prop to PortalProps and OverlayableProps to capture all events at the Portal and prevent them from bubbling up the tree
2. add a prop which supports a list of event types to capture at the Portal, like [core] feat(Overlay, Portal): allow portal to stop event propagation #6093