Fix bug where clicking the combo box caret would focus on the button.

- Set focus on searchInput when you click the caret to open the combo box. - Once open, clicking it again is a no-op.
elastic · May 23, 2018 · b014a1d · b014a1d
1 parent 9c5dcf6
commit b014a1d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 21 deletions.
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -16,9 +16,8 @@ exports[`EuiComboBox is rendered 1`] = `
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={Array []}
@@ -44,9 +43,8 @@ exports[`props isClearable is false with selectedOptions 1`] = `
     isListOpen={false}
     onChange={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={
@@ -81,9 +79,8 @@ exports[`props isClearable is false without selectedOptions 1`] = `
     isListOpen={false}
     onChange={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={Array []}
@@ -110,9 +107,8 @@ exports[`props isDisabled 1`] = `
     isListOpen={false}
     onChange={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={
@@ -145,9 +141,8 @@ exports[`props options 1`] = `
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={Array []}
@@ -174,9 +169,8 @@ exports[`props selectedOptions 1`] = `
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={
@@ -212,9 +206,8 @@ exports[`props singleSelection 1`] = `
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
-    onClose={[Function]}
     onFocus={[Function]}
-    onOpen={[Function]}
+    onOpenListClick={[Function]}
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={

diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -417,6 +417,10 @@ export class EuiComboBox extends Component {
     }
   };
 
+  onOpenListClick = () => {
+    this.searchInput.focus();
+  };
+
   onSearchChange = (searchValue) => {
     if (this.props.onSearchChange) {
       this.props.onSearchChange(searchValue);
@@ -586,8 +590,7 @@ export class EuiComboBox extends Component {
           onClear={isClearable && !isDisabled ? this.clearSelectedOptions : undefined}
           hasSelectedOptions={selectedOptions.length > 0}
           isListOpen={isListOpen}
-          onOpen={this.openList}
-          onClose={this.closeList}
+          onOpenListClick={this.onOpenListClick}
           singleSelection={singleSelection}
           isDisabled={isDisabled}
         />

diff --git a/src/components/combo_box/combo_box_input/combo_box_input.js b/src/components/combo_box/combo_box_input/combo_box_input.js
@@ -26,8 +26,7 @@ export class EuiComboBoxInput extends Component {
     onClear: PropTypes.func,
     hasSelectedOptions: PropTypes.bool.isRequired,
     isListOpen: PropTypes.bool.isRequired,
-    onOpen: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
+    onOpenListClick: PropTypes.func.isRequired,
     singleSelection: PropTypes.bool,
     isDisabled: PropTypes.bool,
   }
@@ -86,8 +85,7 @@ export class EuiComboBoxInput extends Component {
       onClear,
       hasSelectedOptions,
       isListOpen,
-      onOpen,
-      onClose,
+      onOpenListClick,
       singleSelection,
       isDisabled,
     } = this.props;
@@ -150,7 +148,7 @@ export class EuiComboBoxInput extends Component {
 
     if (!isDisabled) {
       clickProps.onClear = hasSelectedOptions ? onClear : undefined;
-      clickProps.onIconClick = isListOpen ? onClose : onOpen;
+      clickProps.onIconClick = isListOpen ? undefined : onOpenListClick;
     }
 
     return (