EuiComboBox with no custom option: bug fix, cleaned up example, added comment

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `9.8.0`.
+**Bug fixes**
+
+- Fixed EuiComboBox's internal tracking of its focus state ([#1796](https://github.com/elastic/eui/pull/1796))
 
 ## [`9.8.0`](https://github.com/elastic/eui/tree/v9.8.0)
 

src-docs/src/views/combo_box/disallow_custom_options.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import {
   EuiComboBox,
+  EuiFormRow,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -32,6 +33,7 @@ export default class extends Component {
     }];
 
     this.state = {
+      error: undefined,
       selectedOptions: [this.options[2], this.options[4]],
     };
   }
@@ -40,16 +42,34 @@ export default class extends Component {
     this.setState({
       selectedOptions,
     });
-  };
+  }
+
+  onBlur = () => {
+    const { value } = this.inputRef;
+    if (value.length !== 0) {
+      this.setState({
+        error: `"${value}" is not a valid option`,
+      });
+    }
+  }
+
+  clearError = () => this.setState({ error: undefined });
+
+  setInputRef = ref => this.inputRef = ref;
 
   render() {
     return (
-      <EuiComboBox
-        placeholder="Select from a list of options"
-        options={this.options}
-        selectedOptions={this.state.selectedOptions}
-        onChange={this.onChange}
-      />
+      <EuiFormRow error={this.state.error} isInvalid={this.state.error !== undefined}>
+        <EuiComboBox
+          placeholder="Select from a list of options"
+          options={this.options}
+          selectedOptions={this.state.selectedOptions}
+          inputRef={this.setInputRef}
+          onChange={this.onChange}
+          onBlur={this.onBlur}
+          onFocus={this.clearError}
+        />
+      </EuiFormRow>
     );
   }
 }

src/components/combo_box/__snapshots__/combo_box.test.js.snap

@@ -89,7 +89,6 @@ exports[`props full width is rendered 1`] = `
     inputRef={[Function]}
     isListOpen={false}
     noIcon={false}
-    onBlur={[Function]}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
@@ -131,7 +130,6 @@ exports[`props isClearable=false disallows user from clearing input when no opti
     inputRef={[Function]}
     isListOpen={false}
     noIcon={false}
-    onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
@@ -166,7 +164,6 @@ exports[`props isClearable=false disallows user from clearing input when options
     inputRef={[Function]}
     isListOpen={false}
     noIcon={false}
-    onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
@@ -211,7 +208,6 @@ exports[`props isDisabled is rendered 1`] = `
     isDisabled={true}
     isListOpen={false}
     noIcon={false}
-    onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
@@ -342,7 +338,6 @@ exports[`props selectedOptions are rendered 1`] = `
     inputRef={[Function]}
     isListOpen={false}
     noIcon={false}
-    onBlur={[Function]}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
@@ -387,7 +382,6 @@ exports[`props singleSelection is rendered 1`] = `
     inputRef={[Function]}
     isListOpen={false}
     noIcon={false}
-    onBlur={[Function]}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
@@ -429,7 +423,6 @@ exports[`props singleSelection selects existing option when opened 1`] = `
     inputRef={[Function]}
     isListOpen={true}
     noIcon={false}
-    onBlur={[Function]}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}

src/components/combo_box/combo_box.js

@@ -290,6 +290,7 @@ export class EuiComboBox extends Component {
       if (this.props.onBlur) {
         this.props.onBlur();
       }
+      this.setState({ hasFocus: false });
 
       // 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.
@@ -299,10 +300,6 @@ export class EuiComboBox extends Component {
     }
   }
 
-  onComboBoxBlur = () => {
-    this.setState({ hasFocus: false });
-  }
-
   onKeyDown = (e) => {
     switch (e.keyCode) {
       case comboBoxKeyCodes.UP:
@@ -573,6 +570,7 @@ export class EuiComboBox extends Component {
       onSearchChange, // eslint-disable-line no-unused-vars
       async, // eslint-disable-line no-unused-vars
       onBlur, // eslint-disable-line no-unused-vars
+      inputRef, // eslint-disable-line no-unused-vars
       isInvalid,
       rowHeight,
       isClearable,
@@ -583,6 +581,8 @@ export class EuiComboBox extends Component {
     } = this.props;
     const { hasFocus, searchValue, isListOpen, listPosition, width, activeOptionIndex } = this.state;
 
+    // Visually indicate the combobox is in an invalid state if it has lost focus but there is text entered in the input
+    // this can occur when custom options are disabled and the user leaves the combo box after entering text that does not match any options
     const markAsInvalid = isInvalid || (hasFocus === false && searchValue);
 
     const classes = classNames('euiComboBox', className, {
@@ -646,7 +646,6 @@ export class EuiComboBox extends Component {
           placeholder={placeholder}
           selectedOptions={selectedOptions}
           onRemoveOption={this.onRemoveOption}
-          onBlur={this.onComboBoxBlur}
           onClick={this.onComboBoxClick}
           onChange={this.onSearchChange}
           onFocus={this.onComboBoxFocus}