Add onBlur prop to EuiComboBox

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.2.0`.
+- Added `onBlur` prop to `EuiComboBox` ([#1400](https://github.com/elastic/eui/pull/1400))
 
 ## [`6.2.0`](https://github.com/elastic/eui/tree/v6.2.0)
 

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

@@ -89,6 +89,7 @@ exports[`props full width is rendered 1`] = `
     inputRef={[Function]}
     isListOpen={false}
     noIcon={false}
+    onBlur={[Function]}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
@@ -131,6 +132,7 @@ 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,6 +168,7 @@ 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,6 +214,7 @@ exports[`props isDisabled is rendered 1`] = `
     isDisabled={true}
     isListOpen={false}
     noIcon={false}
+    onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
@@ -341,6 +345,7 @@ exports[`props selectedOptions are rendered 1`] = `
     inputRef={[Function]}
     isListOpen={false}
     noIcon={false}
+    onBlur={[Function]}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
@@ -386,6 +391,7 @@ exports[`props singleSelection is rendered 1`] = `
     inputRef={[Function]}
     isListOpen={false}
     noIcon={false}
+    onBlur={[Function]}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
@@ -428,6 +434,7 @@ 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

@@ -38,6 +38,7 @@ export class EuiComboBox extends Component {
     noSuggestions: PropTypes.bool,
     options: PropTypes.array,
     selectedOptions: PropTypes.array,
+    onBlur: PropTypes.func,
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
     onSearchChange: PropTypes.func,
@@ -277,7 +278,7 @@ export class EuiComboBox extends Component {
     this.openList();
   }
 
-  onBlur = (e) => {
+  onContainerBlur = (e) => {
     // close the options list, unless the use clicked on an option
     const focusedInOptionsList = this.optionsList && this.optionsList.contains(e.relatedTarget);
     const focusedInInput = this.comboBox && this.comboBox.contains(e.relatedTarget);
@@ -290,9 +291,11 @@ export class EuiComboBox extends Component {
     if (!this.hasActiveOption() && !focusedInInput) {
       this.addCustomOption();
     }
+  }
 
+  onComboBoxBlur = () => {
     if (this.props.onBlur) {
-      this.props.onBlur(e);
+      this.props.onBlur();
     }
   }
 
@@ -619,7 +622,7 @@ export class EuiComboBox extends Component {
         onKeyDown={this.onKeyDown}
         ref={this.comboBoxRef}
         data-test-subj={dataTestSubj}
-        onBlur={this.onBlur}
+        onBlur={this.onContainerBlur}
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded={isListOpen}
@@ -629,6 +632,7 @@ export class EuiComboBox extends Component {
           placeholder={placeholder}
           selectedOptions={selectedOptions}
           onRemoveOption={this.onRemoveOption}
+          onBlur={this.onComboBoxBlur}
           onClick={this.onComboBoxClick}
           onChange={this.onSearchChange}
           onFocus={this.onComboBoxFocus}

src/components/combo_box/combo_box_input/combo_box_input.js

@@ -16,6 +16,7 @@ export class EuiComboBoxInput extends Component {
     placeholder: PropTypes.string,
     selectedOptions: PropTypes.array,
     onRemoveOption: PropTypes.func,
+    onBlur: PropTypes.func,
     onClick: PropTypes.func,
     onFocus: PropTypes.func.isRequired,
     onChange: PropTypes.func,
@@ -67,6 +68,9 @@ export class EuiComboBoxInput extends Component {
   };
 
   onBlur = () => {
+    if (this.props.onBlur) {
+      this.props.onBlur();
+    }
     this.setState({
       hasFocus: false,
     });

src/components/combo_box/index.d.ts

@@ -63,6 +63,7 @@ declare module '@elastic/eui' {
     noSuggestions?: boolean,
     options?: EuiComboBoxOptionsListProps['options'],
     selectedOptions?: EuiComboBoxOptionsListProps['selectedOptions'],
+    onBlur?: FocusEventHandler<HTMLInputElement>,
     onChange?: (options: Array<EuiComboBoxOptionProps>) => any,
     onFocus?: FocusEventHandler<HTMLInputElement>,
     onSearchChange?: (searchValue: string) => any,