[Discuss][RFC] - Add outside click onClose

[michaelolo24]

Background

There have been a few cases of bugs within Kibana where certain popovers or flyouts have stayed open when ideally they should have been closed on a click outside of the popover or flyout element. Most of these elements have either some form of an onClose or handleClose prop which allows use to manually trigger the close. This issue is an RFC to add a boolean flag or something similar to an closeOnOutsideClick boolean off to all popovers/modals. This could use the outsideClickDetector internally to the components, but could prove very useful in addressing a class of minor UI bugs such as these.

• [Security Solution] User information overlaps with alerts details flyout kibana#128235
• [Security Solution]Field modal can remains opened in cancel flow of Create Field kibana#128620
• [Security Solution] Show top modal is shown even after open the timeline from bottom  kibana#128350

As an aside, when testing the outsideClickDetector https://elastic.github.io/eui/#/utilities/outside-click-detector, I was surprised to find that it also detects clicks on the button itself when enabled, which I would not have expected to be the default behavior

Screen.Recording.2022-04-12.at.9.22.19.AM.mov

[cchaos]

Hey @michaelolo24, a prop already exists called outsideClickCloses.

[michaelolo24]

Awesome, is this for popovers and modals? Couldn't find it in the docs

[cchaos]

Popover's instinctively have his so long as you pass an onClose function. Modal's are the exception where we puposefully don't allow closing it by clicking outside as it says in out docs:

[michaelolo24]

Thanks!