EuiComboBox converts entered text into a custom option on blur (ela…

…stic#1353)

`EuiComboBox` will convert entered text into a custom option when the user takes away focus, e.g. by tabbing to another element. This prevents the `EuiComboBox` from being mistaken for a `EuiInputText`.

CHANGELOG.md

@@ -4,13 +4,11 @@
 - Altered `EuiHeader`'s location of `EuiHeaderBreadcrumbs` based on the new `truncate` ability ([#1346](https://github.com/elastic/eui/pull/1346))
 - Added support for `href` and `target` props in `EuiBasicTable` actions ([#1347](https://github.com/elastic/eui/pull/1347))
 - Added `.eui-textBreakWord` CSS utility class  ([#1349](https://github.com/elastic/eui/pull/1349))
+- Added support for `EuiComboBox` converting entered text into a custom option when the user removes focus, e.g. by tabbing to another element. This prevents the `EuiComboBox` from being mistaken for an `EuiInputText`. ([#1353](https://github.com/elastic/eui/pull/1353))
 
 **Bug fixes**
 
 - Fixed word-breaks in table cells for Firefox ([#1349](https://github.com/elastic/eui/pull/1349))
-
-**Bug fixes**
-
 - Fixed EUI when used in an environment lacking ES Modules support, e.g. Jest ([#1358](https://github.com/elastic/eui/pull/1358))
 
 ## [`5.4.0`](https://github.com/elastic/eui/tree/v5.4.0)

src/components/combo_box/combo_box.js

@@ -258,6 +258,12 @@ export class EuiComboBox extends Component {
       this.closeList();
     }
 
+    // If the user tabs away or changes focus to another element, take whatever input they've
+    // typed and convert it into a pill, to prevent the combo box from looking like a text input.
+    if (!this.hasActiveOption()) {
+      this.addCustomOption();
+    }
+
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }