[Overlay] Nested overlays close all overlays when inner content is clicked

[tyscorp]

Bug report

• Package version(s): v1.x and v2.x
• Browser and OS versions: Irrelevant

Steps to reproduce

1. Create nested overlays/popovers
2. Click the content of a nested popover.

Screencast of the issue on the docs here.

Actual behavior

All the popovers close.

Expected behavior

All popovers remain open.

I have fixed this locally by patching Overlay. My solution works by propagating depth via context. Every overlay reads the current depth and then sets the new depth to +1. I then override handleDocumentClick and if a nested overlay was clicked, only close the descendants.

The source code for this patch is here. I currrently use the DOM to store data but I think another solution would be possible.

I'd be interested in making a PR with a better solution if wanted.

[giladgray]

💯 bug report! thanks for the screencast and patch link!

oof this is some nasty interaction, cuz each nested Overlay is in a separate Portal.
we already maintain Overlay.overlayStack with refs of nested Overlay components. I wonder if that could be used instead of context / DOM data?