From 485d9e9386427ada2be030acebe660cd96e9d48b Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 7 May 2019 12:50:19 -0500 Subject: [PATCH 1/3] prevent propagation on inconsitent mouseup events --- src/components/form/select/select.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js index ad9cddf998c..38a92600598 100644 --- a/src/components/form/select/select.js +++ b/src/components/form/select/select.js @@ -25,8 +25,16 @@ export const EuiSelect = ({ value, prepend, append, + onMouseUp, ...rest }) => { + + const handleMouseUp = e => { + // TODO: Add appropriate comment per PR resolution + e.nativeEvent.stopImmediatePropagation(); + if (onMouseUp) onMouseUp(e); + }; + const classes = classNames( 'euiSelect', { @@ -74,6 +82,7 @@ export const EuiSelect = ({ ref={inputRef} defaultValue={selectDefaultValue} value={value} + onMouseUp={handleMouseUp} {...rest} > {emptyOptionNode} From 714ac3d3a57772ad279a0e4de57dac4cf60c7038 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 8 May 2019 09:52:05 -0500 Subject: [PATCH 2/3] documentation --- .../outside_click_detector_example.js | 20 +++++++++++++++---- src/components/form/select/select.js | 5 ++++- 2 files changed, 20 insertions(+), 5 deletions(-) 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 index 3584e91af18..747f5f9d310 100644 --- 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: ( -

- Use EuiOutsideClickDetector to trigger a handler when the user clicks outside of the - child element. -

+ +

+ Use EuiOutsideClickDetector to trigger a handler when the user clicks outside of the + child element. +

+ +

+ EuiSelect normalizes browser event inconsistencies with select elements + and as a result may not trigger EuiOutsideClickDetector when targeted with mouse events. +

+
+
), props: { EuiOutsideClickDetector }, demo: , diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js index 38a92600598..3a48faa66b2 100644 --- a/src/components/form/select/select.js +++ b/src/components/form/select/select.js @@ -30,7 +30,10 @@ export const EuiSelect = ({ }) => { const handleMouseUp = e => { - // TODO: Add appropriate comment per PR resolution + // 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); }; From 8591904b6c213bde3cdc78d87349c6486015d15b Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 8 May 2019 09:59:58 -0500 Subject: [PATCH 3/3] #1926 CL entry --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e1d3c0c723..3a26daa9d43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `11.0.0`. +**Bug fixes** + +- Fixed `EuiSelect` browser event inconsistencies by normalizing `mouseup` propagation ([#1926](https://github.com/elastic/eui/pull/1926)) ## [`11.0.0`](https://github.com/elastic/eui/tree/v11.0.0)