Modal: Dropdown interactions trigger a close

[andy-hook]

https://codesandbox.io/s/modal-premature-close-9mhf7?file=/src/App.js

Highly likely to be escapeOutside triggering because the dropdown popover portal is outside the modal dom tree.

[bpierre]

I can’t find a discussion about it, but something we’ve been wanting to implement for a long time is a layering system. A component (or hook) would get used by every component needing one of the properties of a “layer”, which would be handling things related to the focus, the escape key, clicking outside, etc. This layer component would make sure that an escape event only gets propagated to the first one (in the React tree and not the DOM). It would also provide a way to trap the focus, which is missing at the moment.

Edit: probably related to https://github.com/aragon/ui/issues/343

[andy-hook]

I can’t find a discussion about it, but something we’ve been wanting to implement for a long time is a layering system. A component (or hook) would get used by every component needing one of the properties of a “layer”, which would be handling things related to the focus, the escape key, clicking outside, etc. This layer component would make sure that an escape event only gets propagated to the first one (in the React tree and not the DOM). It would also provide a way to trap the focus, which is missing at the moment.

Edit: probably related to #343

💯 💯 totally agree, leaning on Reacts internal handling of propagation within portals would solve a lot of issues too imo.

[eliobricenov]

hey @andy-hook @bpierre - any steps to reproduce this?

[andy-hook]

Hey @eliobricenov, any component using a popover element inside a modal will trigger this behaviour, here's a simplified repro:

https://codesandbox.io/s/modal-premature-close-9mhf7?file=/src/App.js