Add event target checker for EuiOverlayMask's onClick prop (#3462)

elastic · May 14, 2020 · 412e7aa · 412e7aa
1 parent b26d315
commit 412e7aa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
+- Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462))
 
 ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0)
 
@@ -11,12 +12,12 @@
 - Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
 - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))
 - Improved contrast for `EuiCollapsibleNav` close button ([#3465](https://github.com/elastic/eui/pull/3465))
-- Fixed `EuiCodeEditor` console error when using the editor without import the default theme ([#3454](https://github.com/elastic/eui/pull/3454))
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
 
 **Bug Fixes**
 
 - Fixed `EuiSuperDatePicker` quick selection menu overriding specified time range with default values ([#3446](https://github.com/elastic/eui/pull/3446))
+- Fixed `EuiCodeEditor` console error when using the editor without import the default theme ([#3454](https://github.com/elastic/eui/pull/3454))
 - Fixed `EuiDatePopoverContent` `onChange` event to only accept `string` date input  ([#3460](https://github.com/elastic/eui/pull/3460))
 
 **Breaking changes**

diff --git a/src-docs/src/views/modal/overflow_test.js b/src-docs/src/views/modal/overflow_test.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import {
   EuiButton,
-  EuiButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -22,7 +21,7 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiOverlayMask>
+      <EuiOverlayMask onClick={closeModal}>
         <EuiModal onClose={closeModal}>
           <EuiModalHeader>
             <EuiModalHeaderTitle>Overflow test</EuiModalHeaderTitle>
@@ -73,10 +72,8 @@ export default () => {
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>
-
             <EuiButton onClick={closeModal} fill>
-              Save
+              Close
             </EuiButton>
           </EuiModalFooter>
         </EuiModal>

diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx
@@ -50,7 +50,14 @@ export class EuiOverlayMask extends Component<Props> {
     this.overlayMaskNode = document.createElement('div');
     this.overlayMaskNode.className = classNames('euiOverlayMask', className);
     if (onClick) {
-      this.overlayMaskNode.addEventListener('click', onClick);
+      this.overlayMaskNode.addEventListener(
+        'click',
+        (e: React.MouseEvent | MouseEvent) => {
+          if (e.target === this.overlayMaskNode) {
+            onClick();
+          }
+        }
+      );
     }
     keysOf(rest).forEach(key => {
       if (typeof rest[key] !== 'string') {