1430: fix combobox item selection in IE11 (#1437)

* 1430: fix combobox item selection in IE11 * changelog
elastic · Jan 16, 2019 · 99875ca · 99875ca
1 parent 5cf5473
commit 99875ca
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');
     });