From f7e447e7d491f6ed6eb5ba918fa6e1eb87a85da0 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 7 Dec 2018 12:46:44 -0800 Subject: [PATCH] `EuiComboBox` converts entered text into a custom option on blur (#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 +--- src/components/combo_box/combo_box.js | 6 ++++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c8a94b078a7..24432ed3619 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index c81d2f3170b..38442993128 100644 --- a/src/components/combo_box/combo_box.js +++ b/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); }