Reinstate combobox onblur pill creation in elastic#1353 and fix bug i…

…n initial implementation.

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `5.6.0`.
+- Reinstate ([#1353](https://github.com/elastic/eui/pull/1353)) `onBlur` action on `euiComboBox`. Note that this can expose errors in validation, most notably when an empty string is accepted as a valid custom option by the `onCreateOption` callback. ([#](https://github.com/elastic/eui/pull/))
 
 ## [`5.6.0`](https://github.com/elastic/eui/tree/v5.6.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() && !focusedInInput) {
+      this.addCustomOption();
+    }
+
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }

src/components/combo_box/combo_box.test.js

@@ -160,6 +160,23 @@ describe('behavior', () => {
       expect(onKeyDownWrapper.mock.calls.length).toBe(1);
     });
 
+    test(`off the search input calls onCreateOption`, () => {
+      const onCreateOptionHandler = sinon.spy();
+
+      const component = mount(
+        <EuiComboBox
+          options={options}
+          selectedOptions={[options[2]]}
+          onCreateOption={onCreateOptionHandler}
+        />
+      );
+
+      const searchInput = findTestSubject(component, 'comboBoxSearchInput');
+      searchInput.simulate('focus');
+      searchInput.simulate('blur');
+      sinon.assert.calledOnce(onCreateOptionHandler);
+    });
+
     test('off the search input does nothing if the user is navigating the options', () => {
       const onKeyDownWrapper = jest.fn();
       const component = mount(