Overlay Mask child element onClick event bubble up

[TAYTS]

Hi, may I know is it possible to add a check on the event target for the OverlayMask component to prevent onClick getting triggered by the bubbling up of the child element's click event?

The use case is that I was trying to allow both the EuiOverlayMask and EuiModal's close button to close the modal. However, when I tried to submit the modal form, the EuiOverlayMask's onClick got triggered by the bubbling of the click event from the modal submit button.

eui/src/components/overlay_mask/overlay_mask.tsx

Lines 52 to 54 in 84bbe8d

	if (onClick) {
	this.overlayMaskNode.addEventListener('click', onClick);
	}

Suggestion:

if (onClick) { 
  this.overlayMaskNode.addEventListener('click', (e) => {
    if (this == e.target) {
      onClick();
    }
  }); 
} 

[chandlerprall]

I think the solution depends on:

@cchaos how do we want consumers to think about the overlay mask:

• it wraps the modal content in the DOM (how it actually works)
• it is independent from the content (maybe we change it to be siblings in the future)
• consumers should never care

If the first, the answer here might be for the consumer to stopPropagation() on those clicks, or to check if the event target is a child node of the overlay.

The second two (and maybe we still do it for the first) would require the proposed solution within EUI

[TAYTS]

@chandlerprall @cchaos
May I know is there any updates regarding this issue?

[cchaos]

I ran around in circles about the correct "implementation" for the behavior but couldn't come up with a solid solution so instead I'll just describe the expected behavior:

Consumer provides onClick to EuiOverlayMask with children, the children should not receive the close action from the overlay, (no matter if the content is interact-able or not). Meaning, even if the overlay's children is simple text, we need to allow mouse interactions on it without triggering the close event.

So this seems to me, that the component should manage when to perform the onClick.

[chandlerprall]

@TAYTS with all of that, we'll take your suggestion with one modification: will need to compare this.overlayMaskNode === e.target instead of this. Would you like to put a PR together for the change?

[TAYTS]

@chandlerprall I have created the PR(#3462)