Featurebug/combobox input focus

CHANGELOG.md

@@ -1,8 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.6.0`.
-
 - Added TypeScript definitions for `EuiFieldPassword`. ([#1255](https://github.com/elastic/eui/pull/1255))
+- Added `compressed` prop to `EuiComboBox` ([#1258](https://github.com/elastic/eui/pull/1258))
+
+**Bug fixes**
+
+- `EuiComboBox` no longer blows up in popovers/modals ([#1258](https://github.com/elastic/eui/pull/1258))
 
 ## [`4.6.0`](https://github.com/elastic/eui/tree/v4.6.0)
 

src-docs/src/views/form_layouts/form_compressed.js

@@ -5,6 +5,7 @@ import React, {
 import {
   EuiButton,
   EuiCheckboxGroup,
+  EuiComboBox,
   EuiFieldText,
   EuiForm,
   EuiFormRow,
@@ -49,6 +50,7 @@ export default class extends Component {
         label: 'Option three',
       }],
       radioIdSelected: `${idPrefix}5`,
+      comboBoxSelectionOptions: [],
     };
   }
 
@@ -106,6 +108,21 @@ export default class extends Component {
             <EuiFilePicker />
           </EuiFormRow>
 
+          <EuiFormRow
+            label="Combo box"
+            compressed
+          >
+            <EuiComboBox
+              options={[
+                { label: 'Option one' },
+                { label: 'Option two' },
+                { label: 'Option three' },
+              ]}
+              selectedOptions={this.state.comboBoxSelectionOptions}
+              onChange={comboBoxSelectionOptions => this.setState({ comboBoxSelectionOptions })}
+            />
+          </EuiFormRow>
+
           <EuiFormRow
             label="Range"
             compressed

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

@@ -2,9 +2,12 @@
 
 exports[`EuiComboBox is rendered 1`] = `
 <div
+  aria-expanded="false"
+  aria-haspopup="listbox"
   aria-label="aria-label"
   class="euiComboBox testClass1 testClass2"
   data-test-subj="test subject string"
+  role="combobox"
 >
   <div
     class="euiFormControlLayout"
@@ -15,14 +18,15 @@ exports[`EuiComboBox is rendered 1`] = `
       <div
         class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
+        tabindex="-1"
       >
         <div
           class="euiComboBox__input"
           style="font-size:14px;display:inline-block"
         >
           <input
-            aria-hidden="true"
             data-test-subj="comboBoxSearchInput"
+            role="textbox"
             style="box-sizing:content-box;width:1px"
             value=""
           />
@@ -69,23 +73,30 @@ exports[`EuiComboBox is rendered 1`] = `
 
 exports[`props full width is rendered 1`] = `
 <div
+  aria-expanded={false}
+  aria-haspopup="listbox"
   className="euiComboBox euiComboBox--fullWidth"
-  onFocus={[Function]}
+  onBlur={[Function]}
   onKeyDown={[Function]}
+  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    compressed={false}
+    focusedOptionId={null}
     fullWidth={true}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
+    noIcon={false}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
     onFocus={[Function]}
     onOpenListClick={[Function]}
     onRemoveOption={[Function]}
+    rootId={[Function]}
     searchValue=""
     selectedOptions={
       Array [
@@ -104,22 +115,29 @@ exports[`props full width is rendered 1`] = `
 
 exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
 <div
+  aria-expanded={false}
+  aria-haspopup="listbox"
   className="euiComboBox"
-  onFocus={[Function]}
+  onBlur={[Function]}
   onKeyDown={[Function]}
+  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    compressed={false}
+    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={false}
     inputRef={[Function]}
     isListOpen={false}
+    noIcon={false}
     onChange={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
     onFocus={[Function]}
     onOpenListClick={[Function]}
     onRemoveOption={[Function]}
+    rootId={[Function]}
     searchValue=""
     selectedOptions={Array []}
     singleSelection={false}
@@ -132,22 +150,29 @@ exports[`props isClearable=false disallows user from clearing input when no opti
 
 exports[`props isClearable=false disallows user from clearing input when options are selected 1`] = `
 <div
+  aria-expanded={false}
+  aria-haspopup="listbox"
   className="euiComboBox"
-  onFocus={[Function]}
+  onBlur={[Function]}
   onKeyDown={[Function]}
+  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    compressed={false}
+    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
+    noIcon={false}
     onChange={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
     onFocus={[Function]}
     onOpenListClick={[Function]}
     onRemoveOption={[Function]}
+    rootId={[Function]}
     searchValue=""
     selectedOptions={
       Array [
@@ -169,23 +194,30 @@ exports[`props isClearable=false disallows user from clearing input when options
 
 exports[`props isDisabled is rendered 1`] = `
 <div
+  aria-expanded={false}
+  aria-haspopup="listbox"
   className="euiComboBox euiComboBox-isDisabled"
-  onFocus={[Function]}
+  onBlur={[Function]}
   onKeyDown={[Function]}
+  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    compressed={false}
+    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isDisabled={true}
     isListOpen={false}
+    noIcon={false}
     onChange={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
     onFocus={[Function]}
     onOpenListClick={[Function]}
     onRemoveOption={[Function]}
+    rootId={[Function]}
     searchValue=""
     selectedOptions={
       Array [
@@ -204,8 +236,11 @@ exports[`props isDisabled is rendered 1`] = `
 
 exports[`props options list is rendered 1`] = `
 <div
+  aria-expanded="true"
+  aria-haspopup="listbox"
   class="euiComboBox euiComboBox-isOpen"
   data-test-subj="alsoGetsAppliedToOptionsList"
+  role="combobox"
 >
   <div
     class="euiFormControlLayout"
@@ -216,14 +251,16 @@ exports[`props options list is rendered 1`] = `
       <div
         class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
+        tabindex="-1"
       >
         <div
           class="euiComboBox__input"
           style="font-size: 14px; display: inline-block;"
         >
           <input
-            aria-hidden="true"
+            aria-controls="htmlid_listbox"
             data-test-subj="comboBoxSearchInput"
+            role="textbox"
             style="box-sizing: content-box; width: 2px;"
             value=""
           />
@@ -276,9 +313,10 @@ exports[`props options list is rendered 1`] = `
         aria-label="grid"
         aria-readonly="true"
         class="ReactVirtualized__Grid ReactVirtualized__List"
-        role="grid"
+        id="htmlid_listbox"
+        role="listbox"
         style="box-sizing: border-box; direction: ltr; height: 189px; position: relative; width: 0px; overflow-x: hidden; overflow-y: auto;"
-        tabindex="-1"
+        tabindex="0"
       />
     </div>
   </div>
@@ -287,23 +325,30 @@ exports[`props options list is rendered 1`] = `
 
 exports[`props selectedOptions are rendered 1`] = `
 <div
+  aria-expanded={false}
+  aria-haspopup="listbox"
   className="euiComboBox"
-  onFocus={[Function]}
+  onBlur={[Function]}
   onKeyDown={[Function]}
+  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    compressed={false}
+    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
+    noIcon={false}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
     onFocus={[Function]}
     onOpenListClick={[Function]}
     onRemoveOption={[Function]}
+    rootId={[Function]}
     searchValue=""
     selectedOptions={
       Array [
@@ -325,23 +370,30 @@ exports[`props selectedOptions are rendered 1`] = `
 
 exports[`props singleSelection is rendered 1`] = `
 <div
+  aria-expanded={false}
+  aria-haspopup="listbox"
   className="euiComboBox"
-  onFocus={[Function]}
+  onBlur={[Function]}
   onKeyDown={[Function]}
+  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
+    compressed={false}
+    focusedOptionId={null}
     fullWidth={false}
     hasSelectedOptions={true}
     inputRef={[Function]}
     isListOpen={false}
+    noIcon={false}
     onChange={[Function]}
     onClear={[Function]}
     onClick={[Function]}
     onCloseListClick={[Function]}
     onFocus={[Function]}
     onOpenListClick={[Function]}
     onRemoveOption={[Function]}
+    rootId={[Function]}
     searchValue=""
     selectedOptions={
       Array [

src/components/combo_box/_combo_box.scss

@@ -14,13 +14,14 @@
     padding: $euiSizeXS;
     @include euiFormControlLayout__padding(1); /* 2 */
 
+    display: flex; /* 1 */
+
     &.euiComboBox__inputWrap-isClearable {
       @include euiFormControlLayout__padding(2); /* 2 */
     }
 
     &:not(.euiComboBox__inputWrap--noWrap) {
       height: auto;  /* 3 */
-      display: flex; /* 1 */
       flex-wrap: wrap; /* 1 */
       align-content: flex-start;
 
@@ -72,4 +73,12 @@
       @include euiFormControlDisabledStyle;
     }
   }
+
+  &.euiComboBox--compressed {
+    .euiComboBox__inputWrap {
+      line-height: $euiFormControlCompressedHeight; /* 2 */
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
 }