From 99875ca9d2b6f3e45716d0863eed5b662d964d4e Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 16 Jan 2019 08:58:59 -0700
Subject: [PATCH] 1430: fix combobox item selection in IE11 (#1437)

* 1430: fix combobox item selection in IE11

* changelog
---
 CHANGELOG.md                                      |  4 ++++
 .../__snapshots__/combo_box.test.js.snap          |  7 -------
 src/components/combo_box/combo_box.js             | 15 ++++++++-------
 src/components/combo_box/combo_box.test.js        |  6 +++++-
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab912c6afef..82054ed7f3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,10 @@
 - Added `inputRef` prop to `EuiComboBox` ([#1433](https://github.com/elastic/eui/pull/1433))
 - Added custom date string formatting for series charts crosshair overlay ([#1429](https://github.com/elastic/eui/pull/1429))
 
+**Bug fixes**
+
+- Fix mouse interaction with `EuiComboBox` in IE11 ([#1437](https://github.com/elastic/eui/pull/1437))
+
 ## [`6.3.1`](https://github.com/elastic/eui/tree/v6.3.1)
 
 **Bug fixes**
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
index 90e5b2465f6..0eabb11de26 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.js.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -76,7 +76,6 @@ exports[`props full width is rendered 1`] = `
   aria-expanded={false}
   aria-haspopup="listbox"
   className="euiComboBox euiComboBox--fullWidth"
-  onBlur={[Function]}
   onKeyDown={[Function]}
   role="combobox"
 >
@@ -119,7 +118,6 @@ exports[`props isClearable=false disallows user from clearing input when no opti
   aria-expanded={false}
   aria-haspopup="listbox"
   className="euiComboBox"
-  onBlur={[Function]}
   onKeyDown={[Function]}
   role="combobox"
 >
@@ -155,7 +153,6 @@ exports[`props isClearable=false disallows user from clearing input when options
   aria-expanded={false}
   aria-haspopup="listbox"
   className="euiComboBox"
-  onBlur={[Function]}
   onKeyDown={[Function]}
   role="combobox"
 >
@@ -200,7 +197,6 @@ exports[`props isDisabled is rendered 1`] = `
   aria-expanded={false}
   aria-haspopup="listbox"
   className="euiComboBox euiComboBox-isDisabled"
-  onBlur={[Function]}
   onKeyDown={[Function]}
   role="combobox"
 >
@@ -332,7 +328,6 @@ exports[`props selectedOptions are rendered 1`] = `
   aria-expanded={false}
   aria-haspopup="listbox"
   className="euiComboBox"
-  onBlur={[Function]}
   onKeyDown={[Function]}
   role="combobox"
 >
@@ -378,7 +373,6 @@ exports[`props singleSelection is rendered 1`] = `
   aria-expanded={false}
   aria-haspopup="listbox"
   className="euiComboBox"
-  onBlur={[Function]}
   onKeyDown={[Function]}
   role="combobox"
 >
@@ -421,7 +415,6 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   aria-expanded={true}
   aria-haspopup="listbox"
   className="euiComboBox euiComboBox-isOpen"
-  onBlur={[Function]}
   onKeyDown={[Function]}
   role="combobox"
 >
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
index 3959a8d8e86..02282d540d3 100644
--- a/src/components/combo_box/combo_box.js
+++ b/src/components/combo_box/combo_box.js
@@ -300,12 +300,6 @@ export class EuiComboBox extends Component {
     }
   }
 
-  onComboBoxLoseFocus = e => {
-    if (!this.comboBox || !this.comboBox.contains(e.relatedTarget)) {
-      this.closeList();
-    }
-  }
-
   onKeyDown = (e) => {
     switch (e.keyCode) {
       case comboBoxKeyCodes.UP:
@@ -434,8 +428,16 @@ export class EuiComboBox extends Component {
   };
 
   comboBoxRef = node => {
+    // IE11 doesn't support the `relatedTarget` event property for blur events
+    // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
+    if (this.comboBox != null) {
+      this.comboBox.removeEventListener('focusout', this.onContainerBlur);
+    }
+
     this.comboBox = node;
+
     if (this.comboBox) {
+      this.comboBox.addEventListener('focusout', this.onContainerBlur);
       const comboBoxBounds = this.comboBox.getBoundingClientRect();
       this.setState({
         width: comboBoxBounds.width,
@@ -626,7 +628,6 @@ export class EuiComboBox extends Component {
         onKeyDown={this.onKeyDown}
         ref={this.comboBoxRef}
         data-test-subj={dataTestSubj}
-        onBlur={this.onContainerBlur}
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded={isListOpen}
diff --git a/src/components/combo_box/combo_box.test.js b/src/components/combo_box/combo_box.test.js
index 31092795adc..2d3dc8fcdd8 100644
--- a/src/components/combo_box/combo_box.test.js
+++ b/src/components/combo_box/combo_box.test.js
@@ -226,7 +226,11 @@ describe('behavior', () => {
       component.setState({ searchValue: 'foo' });
       const searchInput = findTestSubject(component, 'comboBoxSearchInput');
       searchInput.simulate('focus');
-      searchInput.simulate('blur');
+
+      const searchInputNode = searchInput.getDOMNode();
+      // React doesn't support `focusout` so we have to manually trigger it
+      searchInputNode.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+
       sinon.assert.calledOnce(onCreateOptionHandler);
       sinon.assert.calledWith(onCreateOptionHandler, 'foo');
     });