1430: fix combobox item selection in IE11

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 - 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**

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"
 >

src/components/combo_box/combo_box.js

@@ -299,12 +299,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:
@@ -433,8 +427,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,
@@ -622,7 +624,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}

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');
     });