EuiSelect: prevent propagation on inconsistent mouseup events (#1926)

* prevent propagation on inconsitent mouseup events * documentation * #1926 CL entry
elastic · May 8, 2019 · debab6b · debab6b
1 parent 3988503
commit debab6b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+**Bug fixes**
+
 - Removed unused prop enum of `l` in `EuiButton` ([#1936](https://github.com/elastic/eui/pull/1936))
+- Fixed `EuiSelect` browser event inconsistencies by normalizing `mouseup` propagation ([#1926](https://github.com/elastic/eui/pull/1926))
 
 ## [`11.0.1`](https://github.com/elastic/eui/tree/v11.0.1)
 

diff --git a/src-docs/src/views/outside_click_detector/outside_click_detector_example.js b/src-docs/src/views/outside_click_detector/outside_click_detector_example.js
@@ -7,6 +7,7 @@ import {
 } from '../../components';
 
 import {
+  EuiCallOut,
   EuiCode,
   EuiOutsideClickDetector,
 } from '../../../../src/components';
@@ -26,10 +27,21 @@ export const OutsideClickDetectorExample = {
       code: outsideClickDetectorHtml,
     }],
     text: (
-      <p>
-        Use <EuiCode>EuiOutsideClickDetector</EuiCode> to trigger a handler when the user clicks outside of the
-        child element.
-      </p>
+      <React.Fragment>
+        <p>
+          Use <EuiCode>EuiOutsideClickDetector</EuiCode> to trigger a handler when the user clicks outside of the
+          child element.
+        </p>
+        <EuiCallOut
+          title="Use with EuiSelect"
+          color="warning"
+        >
+          <p>
+            <EuiCode>EuiSelect</EuiCode> normalizes browser event inconsistencies with <EuiCode>select</EuiCode> elements
+            and as a result may not trigger <EuiCode>EuiOutsideClickDetector</EuiCode> when targeted with mouse events.
+          </p>
+        </EuiCallOut>
+      </React.Fragment>
     ),
     props: { EuiOutsideClickDetector },
     demo: <OutsideClickDetector />,

diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js
@@ -25,8 +25,19 @@ export const EuiSelect = ({
   value,
   prepend,
   append,
+  onMouseUp,
   ...rest
 }) => {
+
+  const handleMouseUp = e => {
+    // Normalizes cross-browser mouse eventing by preventing propagation,
+    // notably for use in conjunction with EuiOutsideClickDetector.
+    // See https://github.com/elastic/eui/pull/1926 for full discussion on
+    // rationale and alternatives should this intervention become problematic.
+    e.nativeEvent.stopImmediatePropagation();
+    if (onMouseUp) onMouseUp(e);
+  };
+
   const classes = classNames(
     'euiSelect',
     {
@@ -74,6 +85,7 @@ export const EuiSelect = ({
           ref={inputRef}
           defaultValue={selectDefaultValue}
           value={value}
+          onMouseUp={handleMouseUp}
           {...rest}
         >
           {emptyOptionNode}