Close modal on outside click

[GenatHadri]

Hi everyone,

I have a requirement to close modals when clicking outside of them. I've done some research, and I've found that Elastic UI doesn't natively support this feature. However, I wanted to ask if anyone has come up with a workaround solution for this issue?

I attempted to use a custom hook I have for detecting clicks outside an element, in this case, the div in which I wrapped the modal. However, I've encountered some unexpected behavior with the div, possibly due to the modal being a portal. You can see the issue in the following screenshot:https://github.com/elastic/eui/assets/63067800/aa9a3fe8-d0bf-4baa-b24b-0d3e6dd1603f

[cee-chen]

Unfortunately, the intention of the modal component is specifically to block underlying clicks. The lack of click outside to close is actually a design decision, per the component docs:

A modal works best for focusing users' attention on a short amount of content and getting them to make a decision. Use it to temporarily interrupt a user’s current task and block interactions to the content below it.

If your modal content is more complex, or requires considerable time to complete, consider using an EuiFlyout instead.
[...]
Modals come a wrapping EuiOverlayMask to obscure the content beneath, but unlike flyouts, modals cannot be dismissed by clicking on the overlay mask. This is inline with our modal usage guidelines which requires there to be a primary action button, even if that button simply closes the modal.

For those reasons, we don't allow easily passing props to the modal's overlay mask or focus trap to enable outside click to close. If you absolutely must use your own UX and break away from EUI guidelines, you'd need to add your own window.addEventListener('click', yourEvent), and use the event.target to figure out if the mask or the modal was clicked (you can probably fairly safely target the .euiOverlayMask and .euiModal selectors).

Alternatively, depending on your use case, consider using the EuiFlyout component instead.