elastic · chandlerprall · Oct 30, 2018 · Oct 23, 2018 · Oct 23, 2018 · Oct 23, 2018
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `apmTrace` icon to `EuiIcon` set ([#1263](https://github.com/elastic/eui/pull/1263))
+- Added `compressed` prop to `EuiComboBox` ([#1258](https://github.com/elastic/eui/pull/1258))
 
-No public interface changes since `4.6.1`.
+**Bug fixes**
+
+- `EuiComboBox` no longer throws a _Maximum update depth exceeded_ error when used in popovers/modals ([#1258](https://github.com/elastic/eui/pull/1258))
+- `Escape` key now closes `EuiComboBox` options list ([#1258](https://github.com/elastic/eui/pull/1258))
 
 ## [`4.6.1`](https://github.com/elastic/eui/tree/v4.6.1)
 

diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
@@ -11,6 +11,7 @@ import {
 } from '../../components';
 
 import {
+  EuiLink,
   EuiCallOut,
   EuiCode,
   EuiComboBox,
@@ -129,7 +130,7 @@ export const ComboBoxExample = {
     }],
     text: (
       <p>
-        <EuiCode>EuiComboBoxList</EuiCode> uses <Link to="https://github.com/bvaughn/react-virtualized">react-virtualized</Link>{' '}
+        <EuiCode>EuiComboBoxList</EuiCode> uses <EuiLink href="https://github.com/bvaughn/react-virtualized">react-virtualized</EuiLink>{' '}
         to only render visible options to be super fast no matter how many options there are.
       </p>
     ),

diff --git a/src-docs/src/views/form_layouts/form_compressed.js b/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

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/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 [

diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
@@ -7,20 +7,27 @@
    * 2. Don't allow pills to overlap with the caret or clear button.
    * 3. The height on combo can be larger than normal text inputs.
    */
+
+   &--compressed,
+   .euiFormControlLayout--compressed {
+     height: auto;
+   }
+
   .euiComboBox__inputWrap {
-    @include euiFormControlStyle($includeStates: false, $includeSizes: true);
+    @include euiFormControlStyle($includeStates: false, $includeSizes: false);
     @include euiFormControlWithIcon($isIconOptional: true);
-    @include euiFormControlSize();
+    @include euiFormControlSize(auto);
     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;
 
@@ -32,7 +39,7 @@
 
   /**
    * 1. Force field height to match other field heights.
-   * 2. Force input height to expand tp fill this element.
+   * 2. Force input height to expand to fill this element.
    * 3. Reset appearance on Safari.
    * 4. Fix react-input-autosize appearance.
    * 5. Prevent a lot of input from causing the react-input-autosize to overflow the container.
@@ -72,4 +79,12 @@
       @include euiFormControlDisabledStyle;
     }
   }
+
+  &.euiComboBox--compressed {
+    .euiComboBox__inputWrap {
+      line-height: $euiFormControlCompressedHeight; /* 2 */
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
 }