From 508686dc7cb486771fb96330f6b7da52699fbd99 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Fri, 7 Feb 2020 21:50:06 -0500
Subject: [PATCH 01/13] first pass at ComboBox components

---
 package.json                                  |   2 +
 src/components/badge/badge.tsx                |   7 +-
 .../__snapshots__/combo_box.test.js.snap      | 524 ------------------
 .../{combo_box.test.js => combo_box.test.tsx} |  46 +-
 .../combo_box/{combo_box.js => combo_box.tsx} | 446 ++++++++-------
 ...combo_box_input.js => combo_box_input.tsx} | 213 +++----
 .../{combo_box_pill.js => combo_box_pill.tsx} |  50 +-
 .../combo_box_input/{index.js => index.ts}    |   0
 ...mbo_box_option.js => combo_box_option.tsx} |  49 +-
 ...ons_list.js => combo_box_options_list.tsx} | 174 +++---
 .../{index.js => index.ts}                    |   0
 src/components/combo_box/index.d.ts           | 113 +---
 src/components/combo_box/index.js             |   1 -
 src/components/combo_box/index.ts             |  16 +
 .../combo_box/matching_options.test.ts        |  18 +-
 src/components/combo_box/matching_options.ts  |  26 +-
 yarn.lock                                     |  12 +
 17 files changed, 608 insertions(+), 1089 deletions(-)
 delete mode 100644 src/components/combo_box/__snapshots__/combo_box.test.js.snap
 rename src/components/combo_box/{combo_box.test.js => combo_box.test.tsx} (90%)
 rename src/components/combo_box/{combo_box.js => combo_box.tsx} (74%)
 rename src/components/combo_box/combo_box_input/{combo_box_input.js => combo_box_input.tsx} (60%)
 rename src/components/combo_box/combo_box_input/{combo_box_pill.js => combo_box_pill.tsx} (71%)
 rename src/components/combo_box/combo_box_input/{index.js => index.ts} (100%)
 rename src/components/combo_box/combo_box_options_list/{combo_box_option.js => combo_box_option.tsx} (61%)
 rename src/components/combo_box/combo_box_options_list/{combo_box_options_list.js => combo_box_options_list.tsx} (72%)
 rename src/components/combo_box/combo_box_options_list/{index.js => index.ts} (100%)
 delete mode 100644 src/components/combo_box/index.js
 create mode 100644 src/components/combo_box/index.ts

diff --git a/package.json b/package.json
index 6d77bfa6d9c..79fe76e120f 100644
--- a/package.json
+++ b/package.json
@@ -89,8 +89,10 @@
     "@types/jest": "^24.0.6",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.4",
+    "@types/react-input-autosize": "^2.0.1",
     "@types/react-is": "^16.7.1",
     "@types/resize-observer-browser": "^0.1.1",
+    "@types/sinon": "^7.5.1",
     "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.13.0",
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
index 8cb7def8d7b..295769f688d 100644
--- a/src/components/badge/badge.tsx
+++ b/src/components/badge/badge.tsx
@@ -1,7 +1,8 @@
 import React, {
+  AriaAttributes,
   FunctionComponent,
-  MouseEventHandler,
   HTMLAttributes,
+  MouseEventHandler,
   ReactNode,
 } from 'react';
 import classNames from 'classnames';
@@ -22,7 +23,7 @@ type WithButtonProps = {
   /**
    * Aria label applied to the onClick button
    */
-  onClickAriaLabel: string;
+  onClickAriaLabel: AriaAttributes['aria-label'];
 } & Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'color'>;
 
 type WithSpanProps = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick' | 'color'>;
@@ -36,7 +37,7 @@ interface WithIconOnClick {
   /**
    * Aria label applied to the iconOnClick button
    */
-  iconOnClickAriaLabel: string;
+  iconOnClickAriaLabel: AriaAttributes['aria-label'];
 }
 
 export type EuiBadgeProps = {
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
deleted file mode 100644
index 298bcdf7af9..00000000000
--- a/src/components/combo_box/__snapshots__/combo_box.test.js.snap
+++ /dev/null
@@ -1,524 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-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"
-  >
-    <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <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
-            data-test-subj="comboBoxSearchInput"
-            role="textbox"
-            style="box-sizing:content-box;width:1px"
-            value=""
-          />
-          <div
-            style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre"
-          />
-        </div>
-      </div>
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-      >
-        <button
-          aria-label="Open list of options"
-          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-          data-test-subj="comboBoxToggleListButton"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-            focusable="false"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`props full width is rendered 1`] = `
-<div
-  aria-expanded={false}
-  aria-haspopup="listbox"
-  className="euiComboBox euiComboBox--fullWidth"
-  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 [
-        Object {
-          "label": "Mimas",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas"
-  />
-</div>
-`;
-
-exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
-<div
-  aria-expanded={false}
-  aria-haspopup="listbox"
-  className="euiComboBox"
-  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}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value=""
-  />
-</div>
-`;
-
-exports[`props isClearable=false disallows user from clearing input when options are selected 1`] = `
-<div
-  aria-expanded={false}
-  aria-haspopup="listbox"
-  className="euiComboBox"
-  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 [
-        Object {
-          "label": "Mimas",
-        },
-        Object {
-          "label": "Iapetus",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas, Iapetus"
-  />
-</div>
-`;
-
-exports[`props isDisabled is rendered 1`] = `
-<div
-  aria-expanded={false}
-  aria-haspopup="listbox"
-  className="euiComboBox euiComboBox-isDisabled"
-  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 [
-        Object {
-          "label": "Mimas",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas"
-  />
-</div>
-`;
-
-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"
-  >
-    <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <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-controls="htmlid_listbox"
-            data-test-subj="comboBoxSearchInput"
-            role="textbox"
-            style="box-sizing: content-box; width: 2px;"
-            value=""
-          />
-          <div
-            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-          />
-        </div>
-      </div>
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-      >
-        <button
-          aria-label="Close list of options"
-          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-          data-test-subj="comboBoxToggleListButton"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-            focusable="false"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiPanel euiComboBoxOptionsList euiComboBoxOptionsList--bottom"
-    data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
-  >
-    <div
-      class="euiComboBoxOptionsList__rowWrap"
-    >
-      <div
-        aria-label="grid"
-        aria-readonly="true"
-        class="ReactVirtualized__Grid ReactVirtualized__List"
-        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="0"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`props selectedOptions are rendered 1`] = `
-<div
-  aria-expanded={false}
-  aria-haspopup="listbox"
-  className="euiComboBox"
-  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 [
-        Object {
-          "label": "Mimas",
-        },
-        Object {
-          "label": "Iapetus",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas, Iapetus"
-  />
-</div>
-`;
-
-exports[`props singleSelection is rendered 1`] = `
-<div
-  aria-expanded={false}
-  aria-haspopup="listbox"
-  className="euiComboBox"
-  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 [
-        Object {
-          "label": "Mimas",
-        },
-      ]
-    }
-    singleSelection={true}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas"
-  />
-</div>
-`;
-
-exports[`props singleSelection selects existing option when opened 1`] = `
-<div
-  aria-expanded={true}
-  aria-haspopup="listbox"
-  className="euiComboBox euiComboBox-isOpen"
-  onKeyDown={[Function]}
-  role="combobox"
->
-  <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
-    compressed={false}
-    focusedOptionId={null}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    inputRef={[Function]}
-    isListOpen={true}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-      ]
-    }
-    singleSelection={true}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas"
-  />
-  <EuiPortal>
-    <EuiComboBoxOptionsList
-      activeOptionIndex={-1}
-      areAllOptionsSelected={false}
-      data-test-subj=""
-      fullWidth={false}
-      getSelectedOptionForSearchValue={[Function]}
-      listRef={[Function]}
-      matchingOptions={
-        Array [
-          Object {
-            "data-test-subj": "titanOption",
-            "label": "Titan",
-          },
-          Object {
-            "label": "Enceladus",
-          },
-          Object {
-            "label": "Mimas",
-          },
-          Object {
-            "label": "Dione",
-          },
-          Object {
-            "label": "Iapetus",
-          },
-          Object {
-            "label": "Phoebe",
-          },
-          Object {
-            "label": "Rhea",
-          },
-          Object {
-            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-          },
-          Object {
-            "label": "Tethys",
-          },
-          Object {
-            "label": "Hyperion",
-          },
-        ]
-      }
-      onCloseList={[Function]}
-      onOptionClick={[Function]}
-      onOptionEnterKey={[Function]}
-      onScroll={[Function]}
-      optionRef={[Function]}
-      options={
-        Array [
-          Object {
-            "data-test-subj": "titanOption",
-            "label": "Titan",
-          },
-          Object {
-            "label": "Enceladus",
-          },
-          Object {
-            "label": "Mimas",
-          },
-          Object {
-            "label": "Dione",
-          },
-          Object {
-            "label": "Iapetus",
-          },
-          Object {
-            "label": "Phoebe",
-          },
-          Object {
-            "label": "Rhea",
-          },
-          Object {
-            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-          },
-          Object {
-            "label": "Tethys",
-          },
-          Object {
-            "label": "Hyperion",
-          },
-        ]
-      }
-      position="bottom"
-      rootId={[Function]}
-      rowHeight={27}
-      scrollToIndex={-1}
-      searchValue=""
-      selectedOptions={
-        Array [
-          Object {
-            "label": "Mimas",
-          },
-        ]
-      }
-      updatePosition={[Function]}
-    />
-  </EuiPortal>
-</div>
-`;
diff --git a/src/components/combo_box/combo_box.test.js b/src/components/combo_box/combo_box.test.tsx
similarity index 90%
rename from src/components/combo_box/combo_box.test.js
rename to src/components/combo_box/combo_box.test.tsx
index 5591545d029..9cf3a228b41 100644
--- a/src/components/combo_box/combo_box.test.js
+++ b/src/components/combo_box/combo_box.test.tsx
@@ -17,14 +17,18 @@ jest.mock('../portal', () => ({
 // Mock the htmlIdGenerator to generate predictable ids for snapshot tests
 jest.mock('../../services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => {
-    return suffix => `htmlid_${suffix}`;
+    return (suffix: string) => `htmlid_${suffix}`;
   },
 }));
 
-const options = [
+interface TitanOption {
+  'data-test-subj'?: 'titanOption';
+  label: string;
+}
+const options: TitanOption[] = [
   {
-    label: 'Titan',
     'data-test-subj': 'titanOption',
+    label: 'Titan',
   },
   {
     label: 'Enceladus',
@@ -67,7 +71,7 @@ describe('EuiComboBox', () => {
 describe('props', () => {
   test('options list is rendered', () => {
     const component = mount(
-      <EuiComboBox
+      <EuiComboBox<TitanOption>
         options={options}
         data-test-subj="alsoGetsAppliedToOptionsList"
       />
@@ -79,7 +83,7 @@ describe('props', () => {
 
   test('selectedOptions are rendered', () => {
     const component = shallow(
-      <EuiComboBox
+      <EuiComboBox<TitanOption>
         options={options}
         selectedOptions={[options[2], options[4]]}
       />
@@ -91,7 +95,7 @@ describe('props', () => {
   describe('isClearable=false disallows user from clearing input', () => {
     test('when no options are selected', () => {
       const component = shallow(
-        <EuiComboBox options={options} isClearable={false} />
+        <EuiComboBox<TitanOption> options={options} isClearable={false} />
       );
 
       expect(component).toMatchSnapshot();
@@ -99,7 +103,7 @@ describe('props', () => {
 
     test('when options are selected', () => {
       const component = shallow(
-        <EuiComboBox
+        <EuiComboBox<TitanOption>
           options={options}
           selectedOptions={[options[2], options[4]]}
           isClearable={false}
@@ -113,7 +117,7 @@ describe('props', () => {
   describe('singleSelection', () => {
     test('is rendered', () => {
       const component = shallow(
-        <EuiComboBox
+        <EuiComboBox<TitanOption>
           options={options}
           selectedOptions={[options[2]]}
           singleSelection={true}
@@ -124,7 +128,7 @@ describe('props', () => {
     });
     test('selects existing option when opened', () => {
       const component = shallow(
-        <EuiComboBox
+        <EuiComboBox<TitanOption>
           options={options}
           selectedOptions={[options[2]]}
           singleSelection={true}
@@ -138,7 +142,7 @@ describe('props', () => {
 
   test('isDisabled is rendered', () => {
     const component = shallow(
-      <EuiComboBox
+      <EuiComboBox<TitanOption>
         options={options}
         selectedOptions={[options[2]]}
         isDisabled={true}
@@ -150,7 +154,7 @@ describe('props', () => {
 
   test('full width is rendered', () => {
     const component = shallow(
-      <EuiComboBox
+      <EuiComboBox<TitanOption>
         options={options}
         selectedOptions={[options[2]]}
         fullWidth={true}
@@ -167,7 +171,7 @@ describe('behavior', () => {
       const onCreateOptionHandler = sinon.spy();
 
       const component = mount(
-        <EuiComboBox
+        <EuiComboBox<TitanOption>
           options={options}
           selectedOptions={[options[2]]}
           onCreateOption={onCreateOptionHandler}
@@ -186,7 +190,7 @@ describe('behavior', () => {
       const onCreateOptionHandler = sinon.spy();
 
       const component = mount(
-        <EuiComboBox
+        <EuiComboBox<TitanOption>
           options={options}
           selectedOptions={[options[2]]}
           onCreateOption={onCreateOptionHandler}
@@ -205,7 +209,10 @@ describe('behavior', () => {
       const onKeyDownWrapper = jest.fn();
       const component = mount(
         <div onKeyDown={onKeyDownWrapper}>
-          <EuiComboBox options={options} selectedOptions={[options[2]]} />
+          <EuiComboBox<TitanOption>
+            options={options}
+            selectedOptions={[options[2]]}
+          />
         </div>
       );
 
@@ -229,7 +236,7 @@ describe('behavior', () => {
       const onCreateOptionHandler = sinon.spy();
 
       const component = mount(
-        <EuiComboBox
+        <EuiComboBox<TitanOption>
           options={options}
           selectedOptions={[options[2]]}
           onCreateOption={onCreateOptionHandler}
@@ -254,7 +261,10 @@ describe('behavior', () => {
       const onKeyDownWrapper = jest.fn();
       const component = mount(
         <div onKeyDown={onKeyDownWrapper}>
-          <EuiComboBox options={options} selectedOptions={[options[2]]} />
+          <EuiComboBox<TitanOption>
+            options={options}
+            selectedOptions={[options[2]]}
+          />
         </div>
       );
 
@@ -282,7 +292,7 @@ describe('behavior', () => {
     test('calls onChange callback with empty array', () => {
       const onChangeHandler = sinon.spy();
       const component = mount(
-        <EuiComboBox
+        <EuiComboBox<TitanOption>
           options={options}
           selectedOptions={[options[2]]}
           onChange={onChangeHandler}
@@ -296,7 +306,7 @@ describe('behavior', () => {
 
     test('focuses the input', () => {
       const component = mount(
-        <EuiComboBox
+        <EuiComboBox<TitanOption>
           options={options}
           selectedOptions={[options[2]]}
           onChange={() => {}}
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.tsx
similarity index 74%
rename from src/components/combo_box/combo_box.js
rename to src/components/combo_box/combo_box.tsx
index 5a9c480a797..ffc3d8612dc 100644
--- a/src/components/combo_box/combo_box.js
+++ b/src/components/combo_box/combo_box.tsx
@@ -4,8 +4,7 @@
  */
 /* eslint-disable jsx-a11y/role-has-required-aria-props */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, Ref, FocusEventHandler, KeyboardEvent } from 'react';
 import classNames from 'classnames';
 
 import {
@@ -15,7 +14,6 @@ import {
 } from '../../services';
 import { BACKSPACE, TAB, ESCAPE } from '../../services/key_codes';
 import { EuiPortal } from '../portal';
-import { EuiComboBoxInput } from './combo_box_input';
 import { EuiComboBoxOptionsList } from './combo_box_options_list';
 
 import {
@@ -23,78 +21,97 @@ import {
   flattenOptionGroups,
   getSelectedOptionForSearchValue,
 } from './matching_options';
+import { EuiComboBoxSingleSelectionShape, EuiComboBoxInputProps, EuiComboBoxInput } from './combo_box_input/combo_box_input';
+import { EuiComboBoxOptionsListProps } from './combo_box_options_list/combo_box_options_list';
+import {
+  EuiComboBoxOptionOption,
+  EuiComboBoxOptionsListPosition,
+} from './index';
+import { EuiPanelProps } from '../panel/panel';
+import { RefCallback } from '../common';
+
+type DrillProps<T> = Pick<
+  EuiComboBoxOptionsListProps<T>,
+  'onCreateOption' | 'options' | 'renderOption' | 'selectedOptions'
+>;
+
+export interface EuiComboBoxProps<T> extends DrillProps<T> {
+  'data-test-subj'?: string;
+  async: boolean;
+  className?: string;
+  compressed: boolean;
+  fullWidth: boolean;
+  id?: string;
+  inputRef?: RefCallback<HTMLInputElement>;
+  isClearable: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isLoading?: boolean;
+  noSuggestions?: boolean;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onChange?: <T>(options: Array<EuiComboBoxOptionOption<T>>) => void;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+  onSearchChange?: (searchValue: string, hasMatchingOptions?: boolean) => void;
+  placeholder?: string;
+  rowHeight?: number;
+  singleSelection: boolean | EuiComboBoxSingleSelectionShape;
+}
 
-export class EuiComboBox extends Component {
-  static propTypes = {
-    id: PropTypes.string,
-    isDisabled: PropTypes.bool,
-    className: PropTypes.string,
-    placeholder: PropTypes.string,
-    isLoading: PropTypes.bool,
-    async: PropTypes.bool,
-    singleSelection: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.shape({
-        asPlainText: PropTypes.bool,
-      }),
-    ]),
-    noSuggestions: PropTypes.bool,
-    options: PropTypes.array,
-    selectedOptions: PropTypes.array,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
-    onSearchChange: PropTypes.func,
-    onCreateOption: PropTypes.func,
-    renderOption: PropTypes.func,
-    isInvalid: PropTypes.bool,
-    rowHeight: PropTypes.number,
-    isClearable: PropTypes.bool,
-    fullWidth: PropTypes.bool,
-    compressed: PropTypes.bool,
-    inputRef: PropTypes.func,
-  };
+interface EuiComboBoxState<T> {
+  activeOptionIndex: number;
+  hasFocus: boolean;
+  isListOpen: boolean;
+  listElement?: UIEvent | EuiPanelProps['panelRef'];
+  listPosition: EuiComboBoxOptionsListPosition;
+  matchingOptions: Array<EuiComboBoxOptionOption<T>>;
+  searchValue: string;
+  width: number;
+}
+
+const initialSearchValue = '';
 
+export class EuiComboBox<T> extends Component<
+  EuiComboBoxProps<T>,
+  EuiComboBoxState<T>
+  > {
   static defaultProps = {
+    async: false,
+    compressed: false,
+    fullWidth: false,
+    isClearable: true,
     options: [],
     selectedOptions: [],
-    isClearable: true,
     singleSelection: false,
-    fullWidth: false,
-    compressed: false,
   };
 
-  constructor(props) {
-    super(props);
-
-    const initialSearchValue = '';
-    const { options, selectedOptions, singleSelection } = props;
-
-    this.state = {
-      matchingOptions: getMatchingOptions(
-        options,
-        selectedOptions,
-        initialSearchValue,
-        props.async,
-        singleSelection
-      ),
-      listElement: undefined,
-      searchValue: initialSearchValue,
-      isListOpen: false,
-      listPosition: 'bottom',
-      activeOptionIndex: -1,
-      hasFocus: false,
-    };
-
-    this.rootId = htmlIdGenerator();
-
-    // Refs.
-    this.comboBox = undefined;
-    this.autoSizeInput = undefined;
-    this.searchInput = undefined;
-    this.optionsList = undefined;
-    this.options = [];
-  }
+  state: EuiComboBoxState<T> = {
+    activeOptionIndex: -1,
+    hasFocus: false,
+    isListOpen: false,
+    listElement: undefined,
+    listPosition: 'bottom',
+    matchingOptions: getMatchingOptions<T>(
+      this.props.options,
+      this.props.selectedOptions,
+      initialSearchValue,
+      this.props.async,
+      this.props.singleSelection
+    ),
+    searchValue: initialSearchValue,
+    width: 0,
+  };
+
+  _isMounted = false;
+  rootId = htmlIdGenerator();
+
+  // Refs
+  comboBox: HTMLDivElement | null = null;
+  autoSizeInput: HTMLInputElement | null = null;
+  searchInput: HTMLInputElement | null = null;
+  optionsList: HTMLInputElement | null = null;
+  toggleButton: HTMLInputElement | null = null;
+  options: Array<HTMLDivElement | null> = [];
 
   openList = () => {
     this.setState({
@@ -109,7 +126,9 @@ export class EuiComboBox extends Component {
     });
   };
 
-  updateListPosition = (listElement = this.state.listElement) => {
+  updateListPosition = (
+    listElement: UIEvent | EuiPanelProps['panelRef'] = this.state.listElement
+  ) => {
     if (!this._isMounted) {
       return;
     }
@@ -128,13 +147,17 @@ export class EuiComboBox extends Component {
       return;
     }
 
+    if (!this.comboBox) {
+      return;
+    }
+
     const comboBoxBounds = this.comboBox.getBoundingClientRect();
 
     const { position, top } = findPopoverPosition({
+      allowCrossAxis: false,
       anchor: this.comboBox,
       popover: listElement,
       position: 'bottom',
-      allowCrossAxis: false,
     });
 
     this.optionsList.style.top = `${top}px`;
@@ -148,12 +171,12 @@ export class EuiComboBox extends Component {
     // Cache for future calls.
     this.setState({
       listElement,
-      width: comboBoxBounds.width,
       listPosition: position,
+      width: comboBoxBounds.width,
     });
   };
 
-  incrementActiveOptionIndex = amount => {
+  incrementActiveOptionIndex = (amount: number) => {
     // If there are no options available, do nothing.
     if (!this.state.matchingOptions.length) {
       return;
@@ -230,11 +253,11 @@ export class EuiComboBox extends Component {
     }
   };
 
-  addCustomOption = isContainerBlur => {
+  addCustomOption = (isContainerBlur: boolean) => {
     const {
+      onCreateOption,
       options,
       selectedOptions,
-      onCreateOption,
       singleSelection,
     } = this.props;
 
@@ -260,7 +283,7 @@ export class EuiComboBox extends Component {
     }
 
     // Add new custom pill if this is custom input, even if it partially matches an option..
-    const isOptionCreated = this.props.onCreateOption(
+    const isOptionCreated = onCreateOption(
       searchValue,
       flattenOptionGroups(options)
     );
@@ -317,9 +340,9 @@ export class EuiComboBox extends Component {
     );
   };
 
-  onComboBoxFocus = () => {
+  onComboBoxFocus: FocusEventHandler<HTMLInputElement> = event => {
     if (this.props.onFocus) {
-      this.props.onFocus();
+      this.props.onFocus(event);
     }
     if (!this.isSingleSelectionCustomOption()) {
       this.openList();
@@ -327,11 +350,18 @@ export class EuiComboBox extends Component {
     this.setState({ hasFocus: true });
   };
 
-  onContainerBlur = e => {
+  onContainerBlur = (event: FocusEvent) => {
     // close the options list, unless the use clicked on an option
 
-    // FireFox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`
-    const relatedTarget = e.relatedTarget || e.explicitOriginalTarget;
+    /**
+     * FireFox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/explicitOriginalTarget
+     */
+    const relatedTarget =
+      event.relatedTarget ||
+      // @ts-ignore
+      (event.explicitOriginalTarget as EventTarget | null);
+
     const focusedInOptionsList =
       relatedTarget &&
       this.optionsList &&
@@ -342,7 +372,7 @@ export class EuiComboBox extends Component {
       this.closeList();
 
       if (this.props.onBlur) {
-        this.props.onBlur();
+        this.props.onBlur(event);
       }
       this.setState({ hasFocus: false });
 
@@ -354,11 +384,11 @@ export class EuiComboBox extends Component {
     }
   };
 
-  onKeyDown = e => {
-    switch (e.keyCode) {
+  onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    switch (event.keyCode) {
       case comboBoxKeyCodes.UP:
-        e.preventDefault();
-        e.stopPropagation();
+        event.preventDefault();
+        event.stopPropagation();
         if (this.state.isListOpen) {
           this.incrementActiveOptionIndex(-1);
         } else {
@@ -367,8 +397,8 @@ export class EuiComboBox extends Component {
         break;
 
       case comboBoxKeyCodes.DOWN:
-        e.preventDefault();
-        e.stopPropagation();
+        event.preventDefault();
+        event.stopPropagation();
         if (this.state.isListOpen) {
           this.incrementActiveOptionIndex(1);
         } else {
@@ -377,65 +407,74 @@ export class EuiComboBox extends Component {
         break;
 
       case BACKSPACE:
-        e.stopPropagation();
+        event.stopPropagation();
         this.removeLastOption();
         break;
 
       case ESCAPE:
-        e.stopPropagation();
+        event.stopPropagation();
         this.closeList();
         break;
 
       case comboBoxKeyCodes.ENTER:
-        e.preventDefault();
-        e.stopPropagation();
+        event.preventDefault();
+        event.stopPropagation();
         if (this.hasActiveOption()) {
           this.onAddOption(
             this.state.matchingOptions[this.state.activeOptionIndex]
           );
         } else {
-          this.addCustomOption();
+          this.addCustomOption(false);
         }
         break;
 
       case TAB:
         // Disallow tabbing when the user is navigating the options.
         if (this.hasActiveOption() && this.state.isListOpen) {
-          e.preventDefault();
-          e.stopPropagation();
+          event.preventDefault();
+          event.stopPropagation();
         }
         break;
 
       default:
         if (this.props.onKeyDown) {
-          this.props.onKeyDown(e);
+          this.props.onKeyDown(event);
         }
     }
   };
 
-  onOptionEnterKey = option => {
+  onOptionEnterKey = <T extends {}>(option: EuiComboBoxOptionOption<T>) => {
     this.onAddOption(option);
   };
 
-  onOptionClick = option => {
+  onOptionClick = <T extends {}>(option: EuiComboBoxOptionOption<T>) => {
     this.onAddOption(option);
   };
 
-  onAddOption = (addedOption, isContainerBlur) => {
+  onAddOption = <T extends {}>(
+    addedOption: EuiComboBoxOptionOption<T>,
+    isContainerBlur?: boolean
+  ) => {
     if (addedOption.disabled) {
       return;
     }
 
     const { onChange, selectedOptions, singleSelection } = this.props;
-    onChange(
-      singleSelection ? [addedOption] : selectedOptions.concat(addedOption)
-    );
+    const changeOptions = Boolean(singleSelection)
+      ? [addedOption]
+      : [...(selectedOptions as Array<typeof addedOption>), addedOption];
+
+    if (onChange) {
+      onChange(changeOptions);
+    }
 
     this.clearSearchValue();
     this.clearActiveOption();
 
     if (!isContainerBlur) {
-      this.searchInput.focus();
+      if (this.searchInput) {
+        this.searchInput.focus();
+      }
     }
 
     if (singleSelection) {
@@ -443,18 +482,29 @@ export class EuiComboBox extends Component {
     }
   };
 
-  onRemoveOption = removedOption => {
+  onRemoveOption = <T extends {}>(
+    removedOption: EuiComboBoxOptionOption<T>
+  ) => {
     const { onChange, selectedOptions } = this.props;
-    onChange(selectedOptions.filter(option => option !== removedOption));
+    if (onChange) {
+      onChange(selectedOptions.filter(option => option !== removedOption));
+    }
 
     this.clearActiveOption();
   };
 
   clearSelectedOptions = () => {
-    this.props.onChange([]);
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange([]);
+    }
+
     // Clicking the clear button will also cause it to disappear. This would result in focus
     // shifting unexpectedly to the body element so we set it to the input which is more reasonable,
-    this.searchInput.focus();
+    if (this.searchInput) {
+      this.searchInput.focus();
+    }
+
     if (!this.state.isListOpen) {
       this.openList();
     }
@@ -462,7 +512,9 @@ export class EuiComboBox extends Component {
 
   onComboBoxClick = () => {
     // When the user clicks anywhere on the box, enter the interaction state.
-    this.searchInput.focus();
+    if (this.searchInput) {
+      this.searchInput.focus();
+    }
 
     // If the user does this from a state in which an option has focus, then we need to reset it or clear it.
     if (this.props.singleSelection && this.props.selectedOptions.length === 1) {
@@ -477,7 +529,9 @@ export class EuiComboBox extends Component {
   };
 
   onOpenListClick = () => {
-    this.searchInput.focus();
+    if (this.searchInput) {
+      this.searchInput.focus();
+    }
     if (!this.state.isListOpen) {
       this.openList();
     }
@@ -487,10 +541,13 @@ export class EuiComboBox extends Component {
     this.closeList();
   };
 
-  onSearchChange = searchValue => {
-    if (this.props.onSearchChange) {
+  onSearchChange: NonNullable<
+    EuiComboBoxInputProps<T>['onChange']
+  > = searchValue => {
+    const { onSearchChange } = this.props;
+    if (onSearchChange) {
       const hasMatchingOptions = this.state.matchingOptions.length > 0;
-      this.props.onSearchChange(searchValue, hasMatchingOptions);
+      onSearchChange(searchValue, hasMatchingOptions);
     }
 
     this.setState({ searchValue }, () => {
@@ -498,10 +555,10 @@ export class EuiComboBox extends Component {
     });
   };
 
-  comboBoxRef = node => {
+  comboBoxRef: Ref<HTMLDivElement> = node => {
     // IE11 doesn't support the `relatedTarget` event property for blur events
     // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-    if (this.comboBox != null) {
+    if (this.comboBox) {
       this.comboBox.removeEventListener('focusout', this.onContainerBlur);
     }
 
@@ -516,26 +573,27 @@ export class EuiComboBox extends Component {
     }
   };
 
-  autoSizeInputRef = node => {
-    this.autoSizeInput = node;
+  autoSizeInputef: Ref<HTMLInputElement> = node => {
+    this.autoSizeInput = node = null;
   };
 
-  searchInputRef = node => {
+  searchInputRef: Ref<HTMLInputElement> = node => {
+    const { inputRef } = this.props;
     this.searchInput = node;
-    if (this.props.inputRef) {
-      this.props.inputRef(node);
+    if (inputRef && node !== null) {
+      inputRef(node);
     }
   };
 
-  optionsListRef = node => {
+  optionsListRef: Ref<HTMLInputElement> = node => {
     this.optionsList = node;
   };
 
-  optionRef = (index, node) => {
+  optionRef = (index: number, node: HTMLDivElement | null) => {
     this.options[index] = node;
   };
 
-  toggleButtonRef = node => {
+  toggleButtonRef: Ref<HTMLDivElement> = node => {
     this.toggleButton = node;
   };
 
@@ -545,12 +603,15 @@ export class EuiComboBox extends Component {
     // TODO: This will need to be called once the actual stylesheet loads.
     setTimeout(() => {
       if (this.autoSizeInput) {
-        this.autoSizeInput.copyInputStyles();
+        this.autoSizeInputcopyInputStyles() = null;
       }
     }, 100);
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static getDerivedStateFromProps<T>(
+    nextProps: EuiComboBoxProps<T>,
+    prevState: EuiComboBoxState<T>
+  ) {
     const { options, selectedOptions, singleSelection } = nextProps;
     const { activeOptionIndex, searchValue } = prevState;
 
@@ -560,11 +621,11 @@ export class EuiComboBox extends Component {
       options,
       selectedOptions,
       searchValue,
-      nextProps.async,
+      Boolean(nextProps.async),
       singleSelection
     );
 
-    const stateUpdate = { matchingOptions };
+    const stateUpdate: Partial<EuiComboBoxState<T>> = { matchingOptions };
 
     if (activeOptionIndex >= matchingOptions.length) {
       stateUpdate.activeOptionIndex = -1;
@@ -573,7 +634,9 @@ export class EuiComboBox extends Component {
     return stateUpdate;
   }
 
-  updateMatchingOptionsIfDifferent(newMatchingOptions) {
+  updateMatchingOptionsIfDifferent = <T extends {}>(
+    newMatchingOptions: Array<EuiComboBoxOptionOption<T>>
+  ) => {
     const { matchingOptions, activeOptionIndex } = this.state;
     const { singleSelection, selectedOptions } = this.props;
 
@@ -639,37 +702,37 @@ export class EuiComboBox extends Component {
 
   render() {
     const {
+      'data-test-subj': dataTestSubj,
+      async,
+      className,
+      compressed,
+      fullWidth,
       id,
+      inputRef,
+      isClearable,
       isDisabled,
-      className,
+      isInvalid,
       isLoading,
-      options,
-      selectedOptions,
-      onCreateOption,
-      placeholder,
       noSuggestions,
-      renderOption,
-      singleSelection,
+      onBlur,
       onChange,
+      onCreateOption,
       onSearchChange,
-      async,
-      onBlur,
-      inputRef,
-      isInvalid,
+      options,
+      placeholder,
+      renderOption,
       rowHeight,
-      isClearable,
-      fullWidth,
-      compressed,
-      'data-test-subj': dataTestSubj,
+      selectedOptions,
+      singleSelection,
       ...rest
     } = this.props;
     const {
+      activeOptionIndex,
       hasFocus,
-      searchValue,
       isListOpen,
       listPosition,
+      searchValue,
       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.
@@ -680,11 +743,11 @@ export class EuiComboBox extends Component {
       ((hasFocus === false || isListOpen === false) && searchValue);
 
     const classes = classNames('euiComboBox', className, {
-      'euiComboBox-isOpen': isListOpen,
-      'euiComboBox-isInvalid': markAsInvalid,
-      'euiComboBox-isDisabled': isDisabled,
-      'euiComboBox--fullWidth': fullWidth,
       'euiComboBox--compressed': compressed,
+      'euiComboBox--fullWidth': fullWidth,
+      'euiComboBox-isDisabled': isDisabled,
+      'euiComboBox-isInvalid': markAsInvalid,
+      'euiComboBox-isOpen': isListOpen,
     });
 
     const value = selectedOptions
@@ -701,30 +764,33 @@ export class EuiComboBox extends Component {
       optionsList = (
         <EuiPortal>
           <EuiComboBoxOptionsList
-            isLoading={isLoading}
-            options={options}
-            selectedOptions={selectedOptions}
-            onCreateOption={onCreateOption}
-            searchValue={searchValue}
-            matchingOptions={this.state.matchingOptions}
             activeOptionIndex={this.state.activeOptionIndex}
+            areAllOptionsSelected={this.areAllOptionsSelected()}
+            data-test-subj={optionsListDataTestSubj}
+            fullWidth={fullWidth}
+            isLoading={isLoading}
             listRef={this.optionsListRef}
-            optionRef={this.optionRef}
+            matchingOptions={this.state.matchingOptions}
+            onCloseList={this.closeList}
+            onCreateOption={onCreateOption}
             onOptionClick={this.onOptionClick}
             onOptionEnterKey={this.onOptionEnterKey}
-            areAllOptionsSelected={this.areAllOptionsSelected()}
-            getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
-            updatePosition={this.updateListPosition}
+            onScroll={() => {
+              if (this.searchInput) {
+                this.searchInput.focus();
+              }
+            }}
+            optionRef={this.optionRef}
+            options={options}
             position={listPosition}
             renderOption={renderOption}
-            width={width}
-            scrollToIndex={activeOptionIndex}
-            rowHeight={rowHeight}
-            data-test-subj={optionsListDataTestSubj}
-            fullWidth={fullWidth}
             rootId={this.rootId}
-            onCloseList={this.closeList}
-            onScroll={() => this.searchInput.focus()}
+            rowHeight={rowHeight}
+            scrollToIndex={activeOptionIndex}
+            searchValue={searchValue}
+            selectedOptions={selectedOptions}
+            updatePosition={this.updateListPosition}
+            width={width}
           />
         </EuiPortal>
       );
@@ -744,45 +810,45 @@ export class EuiComboBox extends Component {
       // eslint-disable-next-line jsx-a11y/interactive-supports-focus
       <div
         {...rest}
+        aria-expanded={isListOpen}
+        aria-haspopup="listbox"
         className={classes}
+        data-test-subj={dataTestSubj}
         onKeyDown={this.onKeyDown}
         ref={this.comboBoxRef}
-        data-test-subj={dataTestSubj}
-        role="combobox"
-        aria-haspopup="listbox"
-        aria-expanded={isListOpen}>
+        role="combobox">
         <EuiComboBoxInput
+          autoSizeInputef={this.autoSizeInputef}
+          compressed={compressed}
+          focusedOptionId={
+            this.hasActiveOption()
+              ? this.rootId(`_option-${this.state.activeOptionIndex}`)
+              : undefined
+          }
+          fullWidth={fullWidth}
+          hasSelectedOptions={selectedOptions.length > 0}
           id={id}
-          placeholder={placeholder}
-          selectedOptions={selectedOptions}
-          onRemoveOption={this.onRemoveOption}
-          onClick={this.onComboBoxClick}
-          onChange={this.onSearchChange}
-          onFocus={this.onComboBoxFocus}
-          value={value}
-          searchValue={searchValue}
-          autoSizeInputRef={this.autoSizeInputRef}
           inputRef={this.searchInputRef}
-          updatePosition={this.updateListPosition}
+          isDisabled={isDisabled}
+          isListOpen={isListOpen}
+          noIcon={!!noSuggestions}
+          onChange={this.onSearchChange}
           onClear={
             isClearable && !isDisabled ? this.clearSelectedOptions : undefined
           }
-          hasSelectedOptions={selectedOptions.length > 0}
-          isListOpen={isListOpen}
-          onOpenListClick={this.onOpenListClick}
+          onClick={this.onComboBoxClick}
           onCloseListClick={this.onCloseListClick}
+          onFocus={this.onComboBoxFocus}
+          onOpenListClick={this.onOpenListClick}
+          onRemoveOption={this.onRemoveOption}
+          placeholder={placeholder}
+          rootId={this.rootId}
+          searchValue={searchValue}
+          selectedOptions={selectedOptions}
           singleSelection={singleSelection}
-          isDisabled={isDisabled}
           toggleButtonRef={this.toggleButtonRef}
-          fullWidth={fullWidth}
-          noIcon={!!noSuggestions}
-          rootId={this.rootId}
-          focusedOptionId={
-            this.hasActiveOption()
-              ? this.rootId(`_option-${this.state.activeOptionIndex}`)
-              : null
-          }
-          compressed={compressed}
+          updatePosition={this.updateListPosition}
+          value={value}
         />
 
         {optionsList}
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.tsx
similarity index 60%
rename from src/components/combo_box/combo_box_input/combo_box_input.js
rename to src/components/combo_box/combo_box_input/combo_box_input.tsx
index c75d6896616..78ea1ed8d01 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.js
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -1,57 +1,61 @@
-import React, { Component } from 'react';
+import React, { Component, Ref, FocusEventHandler } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import AutosizeInput from 'react-input-autosize';
 
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiFormControlLayout } from '../../form';
+import { EuiFormControlLayout } from '../../form/form_control_layout';
 import { EuiComboBoxPill } from './combo_box_pill';
 import { htmlIdGenerator } from '../../../services';
+import { EuiComboBoxOptionOption } from '..';
+import { EuiFormControlLayoutCustomIconProps } from '../../form/form_control_layout/form_control_layout_custom_icon';
+import { EuiFormControlLayoutIconsProps } from '../../form/form_control_layout/form_control_layout_icons';
 
 const makeId = htmlIdGenerator();
 
-export class EuiComboBoxInput extends Component {
-  static propTypes = {
-    id: PropTypes.string,
-    placeholder: PropTypes.string,
-    selectedOptions: PropTypes.array,
-    onRemoveOption: PropTypes.func,
-    onBlur: PropTypes.func,
-    onClick: PropTypes.func,
-    onFocus: PropTypes.func.isRequired,
-    onChange: PropTypes.func,
-    value: PropTypes.string,
-    searchValue: PropTypes.string,
-    autoSizeInputRef: PropTypes.func,
-    inputRef: PropTypes.func,
-    updatePosition: PropTypes.func.isRequired,
-    onClear: PropTypes.func,
-    hasSelectedOptions: PropTypes.bool.isRequired,
-    isListOpen: PropTypes.bool.isRequired,
-    noIcon: PropTypes.bool.isRequired,
-    onOpenListClick: PropTypes.func.isRequired,
-    onCloseListClick: PropTypes.func.isRequired,
-    singleSelection: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.shape({
-        asPlainText: PropTypes.bool,
-      }),
-    ]),
-    isDisabled: PropTypes.bool,
-    toggleButtonRef: PropTypes.func,
-    fullWidth: PropTypes.bool,
-    rootId: PropTypes.func.isRequired,
-    focusedOptionId: PropTypes.string,
-    compressed: PropTypes.bool.isRequired,
-  };
+export interface EuiComboBoxSingleSelectionShape {
+  asPlainText?: boolean;
+}
 
-  constructor(props) {
-    super(props);
+export interface EuiComboBoxInputProps<T> {
+  autoSizeInputRef?: Ref<HTMLInputElement>;
+  compressed: boolean;
+  focusedOptionId?: string;
+  fullWidth?: boolean;
+  hasSelectedOptions: boolean;
+  id?: string;
+  inputRef?: HTMLInputElement | null;
+  isDisabled?: boolean;
+  isListOpen: boolean;
+  noIcon: boolean;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onChange?: (searchValue: string) => void;
+  onClear?: () => void;
+  onClick?: () => void;
+  onCloseListClick: () => void;
+  onFocus: FocusEventHandler<HTMLInputElement>;
+  onOpenListClick: () => void;
+  onRemoveOption?: (option: EuiComboBoxOptionOption<T>) => void;
+  placeholder?: string;
+  rootId: ReturnType<typeof htmlIdGenerator>;
+  searchValue?: string;
+  selectedOptions?: Array<EuiComboBoxOptionOption<T>>;
+  singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
+  toggleButtonRef?: EuiFormControlLayoutCustomIconProps['iconRef'];
+  updatePosition: () => void;
+  value?: string;
+}
 
-    this.state = {
-      hasFocus: false,
-    };
-  }
+interface EuiComboBoxInputState {
+  hasFocus: boolean;
+}
+
+export class EuiComboBoxInput<T> extends Component<
+  EuiComboBoxInputProps<T>,
+  EuiComboBoxInputState
+  > {
+  state: EuiComboBoxInputState = {
+    hasFocus: false,
+  };
 
   updatePosition = () => {
     // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
@@ -60,23 +64,23 @@ export class EuiComboBoxInput extends Component {
     });
   };
 
-  onFocus = () => {
-    this.props.onFocus();
+  onFocus: FocusEventHandler<HTMLInputElement> = event => {
+    this.props.onFocus(event);
     this.setState({
       hasFocus: true,
     });
   };
 
-  onBlur = () => {
+  onBlur: FocusEventHandler<HTMLInputElement> = event => {
     if (this.props.onBlur) {
-      this.props.onBlur();
+      this.props.onBlur(event);
     }
     this.setState({
       hasFocus: false,
     });
   };
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate<T>(prevProps: EuiComboBoxInputProps<T>) {
     const { searchValue } = prevProps;
 
     // We need to update the position of everything if the user enters enough input to change
@@ -88,46 +92,47 @@ export class EuiComboBoxInput extends Component {
 
   render() {
     const {
-      id,
-      placeholder,
-      selectedOptions,
-      onRemoveOption,
-      onClick,
-      onChange,
-      value,
-      searchValue,
       autoSizeInputRef,
-      inputRef,
-      onClear,
+      compressed,
+      focusedOptionId,
+      fullWidth,
       hasSelectedOptions,
+      id,
+      inputRef,
+      isDisabled,
       isListOpen,
-      onOpenListClick,
+      noIcon,
+      onChange,
+      onClear,
+      onClick,
       onCloseListClick,
+      onOpenListClick,
+      onRemoveOption,
+      placeholder,
+      rootId,
+      searchValue,
+      selectedOptions,
       singleSelection,
-      isDisabled,
       toggleButtonRef,
-      fullWidth,
-      noIcon,
-      rootId,
-      focusedOptionId,
-      compressed,
+      value,
     } = this.props;
 
     const pills = selectedOptions.map(option => {
       const { label, color, onClick, ...rest } = option;
 
       const asPlainText = singleSelection && singleSelection.asPlainText;
+      const pillOnClose =
+        isDisabled || singleSelection || onClick ? undefined : onRemoveOption;
+      const pillOnClick = onClick || (() => { });
 
       return (
         <EuiComboBoxPill
           option={option}
-          onClose={
-            isDisabled || singleSelection || onClick ? null : onRemoveOption
-          }
+          onClose={pillOnClose}
           key={label.toLowerCase()}
           color={color}
-          onClick={onClick}
-          onClickAriaLabel={onClick ? 'Change' : null}
+          onClick={pillOnClick}
+          onClickAriaLabel={onClick ? 'Change' : undefined}
           asPlainText={asPlainText}
           {...rest}>
           {label}
@@ -142,13 +147,13 @@ export class EuiComboBoxInput extends Component {
       const readPlaceholder = placeholder ? `${placeholder}.` : '';
       const removeOptionMessageContent =
         `Combo box. Selected. ${
-          searchValue ? `${searchValue}. Selected. ` : ''
+        searchValue ? `${searchValue}. Selected. ` : ''
         }${
-          selectedOptions.length
-            ? `${value}. Press Backspace to delete ${
-                selectedOptions[selectedOptions.length - 1].label
-              }. `
-            : ''
+        selectedOptions && selectedOptions.length > 0
+          ? `${value}. Press Backspace to delete ${
+          selectedOptions[selectedOptions.length - 1].label
+          }. `
+          : ''
         }Combo box input. ${readPlaceholder} Type some text or, to display a list of choices, press Down Arrow. ` +
         'To exit the list of choices, press Escape.';
 
@@ -169,33 +174,38 @@ export class EuiComboBoxInput extends Component {
 
     let placeholderMessage;
 
-    if (placeholder && !selectedOptions.length && !searchValue) {
+    if (
+      placeholder &&
+      selectedOptions &&
+      !selectedOptions.length &&
+      !searchValue
+    ) {
       placeholderMessage = (
         <p className="euiComboBoxPlaceholder">{placeholder}</p>
       );
     }
 
-    const clickProps = {};
+    const clickProps: EuiFormControlLayoutIconsProps = {};
 
     if (!isDisabled && onClear && hasSelectedOptions) {
       clickProps.clear = {
-        onClick: onClear,
         'data-test-subj': 'comboBoxClearButton',
+        onClick: onClear,
       };
     }
 
-    let icon;
+    let icon: EuiFormControlLayoutIconsProps['icon'] | undefined;
     if (!noIcon) {
       icon = {
-        type: 'arrowDown',
-        side: 'right',
-        onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
-        ref: toggleButtonRef,
         'aria-label': isListOpen
           ? 'Close list of options'
           : 'Open list of options',
-        disabled: isDisabled,
         'data-test-subj': 'comboBoxToggleListButton',
+        disabled: isDisabled,
+        onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
+        ref: toggleButtonRef,
+        side: 'right',
+        type: 'arrowDown',
       };
     }
 
@@ -210,30 +220,35 @@ export class EuiComboBoxInput extends Component {
       <EuiFormControlLayout
         icon={icon}
         {...clickProps}
-        fullWidth={fullWidth}
-        compressed={compressed}>
+        compressed={compressed}
+        fullWidth={fullWidth}>
         <div
           className={wrapClasses}
+          data-test-subj="comboBoxInput"
           onClick={onClick}
-          tabIndex="-1" // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
-          data-test-subj="comboBoxInput">
+          tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
+        >
           {!singleSelection || !searchValue ? pills : null}
           {placeholderMessage}
           <AutosizeInput
-            role="textbox"
-            aria-controls={isListOpen ? rootId('listbox') : null}
             aria-activedescendant={focusedOptionId}
-            id={id}
-            style={{ fontSize: 14 }}
+            aria-controls={isListOpen ? rootId('listbox') : ''}
             className="euiComboBox__input"
-            onFocus={this.onFocus}
+            data-test-subj="comboBoxSearchInput"
+            disabled={isDisabled}
+            id={id}
+            inputRef={inputRef}
             onBlur={this.onBlur}
-            onChange={e => onChange(e.target.value)}
-            value={searchValue}
+            onChange={event => {
+              if (onChange) {
+                onChange(event.target.value as typeof searchValue);
+              }
+            }}
+            onFocus={this.onFocus}
             ref={autoSizeInputRef}
-            inputRef={inputRef}
-            disabled={isDisabled}
-            data-test-subj="comboBoxSearchInput"
+            role="textbox"
+            style={{ fontSize: 14 }}
+            value={searchValue}
           />
           {removeOptionMessage}
         </div>
diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.js b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
similarity index 71%
rename from src/components/combo_box/combo_box_input/combo_box_pill.js
rename to src/components/combo_box/combo_box_input/combo_box_pill.tsx
index f0bc0dfb859..1564d45948e 100644
--- a/src/components/combo_box/combo_box_input/combo_box_pill.js
+++ b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
@@ -1,41 +1,43 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { AriaAttributes, Component } from 'react';
 import classNames from 'classnames';
 
 import { EuiBadge } from '../../badge';
 import { EuiI18n } from '../../i18n';
+import { EuiComboBoxOptionOption } from '..';
 
-export class EuiComboBoxPill extends Component {
-  static propTypes = {
-    option: PropTypes.object.isRequired,
-    children: PropTypes.string,
-    className: PropTypes.string,
-    color: PropTypes.string,
-    onClose: PropTypes.func,
-    asPlainText: PropTypes.bool,
-    onClick: PropTypes.func,
-    onClickAriaLabel: PropTypes.string,
-  };
+export interface EuiComboBoxPillProps<T> {
+  asPlainText?: boolean;
+  children?: string;
+  className?: string;
+  color?: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onClickAriaLabel?: AriaAttributes['aria-label'];
+  onClose?: (option: EuiComboBoxOptionOption<T>) => void;
+  option: EuiComboBoxOptionOption<T>;
+}
 
+export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
   static defaultProps = {
     color: 'hollow',
   };
 
   onCloseButtonClick = () => {
     const { onClose, option } = this.props;
-    onClose(option);
+    if (onClose) {
+      onClose(option);
+    }
   };
 
   render() {
     const {
+      asPlainText,
       children,
       className,
-      option, // eslint-disable-line no-unused-vars
-      onClose, // eslint-disable-line no-unused-vars
       color,
       onClick,
       onClickAriaLabel,
-      asPlainText,
+      onClose, // eslint-disable-line no-unused-vars
+      option, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
     const classes = classNames(
@@ -52,20 +54,18 @@ export class EuiComboBoxPill extends Component {
           token="euiComboBoxPill.removeSelection"
           default="Remove {children} from selection in this group"
           values={{ children }}>
-          {removeSelection => (
+          {(removeSelection: string) => (
             <EuiBadge
               className={classes}
-              title={children}
+              closeButtonProps={{ tabIndex: -1 }}
+              color={color}
               iconOnClick={this.onCloseButtonClick}
               iconOnClickAriaLabel={removeSelection}
-              iconType="cross"
               iconSide="right"
-              color={color}
-              closeButtonProps={{
-                tabIndex: '-1',
-              }}
+              iconType="cross"
               onClick={onClick}
               onClickAriaLabel={onClickAriaLabel}
+              title={children}
               {...rest}>
               {children}
             </EuiBadge>
@@ -85,8 +85,8 @@ export class EuiComboBoxPill extends Component {
     return (
       <EuiBadge
         className={classes}
-        title={children}
         color={color}
+        title={children}
         {...rest}
         onClick={onClick}
         onClickAriaLabel={onClickAriaLabel}>
diff --git a/src/components/combo_box/combo_box_input/index.js b/src/components/combo_box/combo_box_input/index.ts
similarity index 100%
rename from src/components/combo_box/combo_box_input/index.js
rename to src/components/combo_box/combo_box_input/index.ts
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.js b/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
similarity index 61%
rename from src/components/combo_box/combo_box_options_list/combo_box_option.js
rename to src/components/combo_box/combo_box_options_list/combo_box_option.tsx
index f642cb46ad7..30e5081e9ed 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_option.js
+++ b/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
@@ -1,21 +1,22 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, KeyboardEvent, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { ENTER, SPACE } from '../../../services/key_codes';
+import { RefCallback } from '../../common';
+import { EuiComboBoxOptionOption } from '../index';
 
-export class EuiComboBoxOption extends Component {
-  static propTypes = {
-    option: PropTypes.object.isRequired,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    optionRef: PropTypes.func,
-    onClick: PropTypes.func.isRequired,
-    onEnterKey: PropTypes.func.isRequired,
-    disabled: PropTypes.bool,
-    isFocused: PropTypes.bool.isRequired,
-  };
+export interface EuiComboBoxOptionProps<T> {
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  isFocused: boolean;
+  onClick: (option: EuiComboBoxOptionOption<T>) => void;
+  onEnterKey: (option: EuiComboBoxOptionOption<T>) => void;
+  option: EuiComboBoxOptionOption<T>;
+  optionRef?: RefCallback<HTMLButtonElement>;
+}
 
+export class EuiComboBoxOption<T> extends Component<EuiComboBoxOptionProps<T>> {
   onClick = () => {
     const { onClick, option, disabled } = this.props;
 
@@ -26,10 +27,10 @@ export class EuiComboBoxOption extends Component {
     onClick(option);
   };
 
-  onKeyDown = e => {
-    if (e.keyCode === ENTER || e.keyCode === SPACE) {
-      e.preventDefault();
-      e.stopPropagation();
+  onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.keyCode === ENTER || event.keyCode === SPACE) {
+      event.preventDefault();
+      event.stopPropagation();
       const { onEnterKey, option, disabled } = this.props;
 
       if (disabled) {
@@ -44,12 +45,12 @@ export class EuiComboBoxOption extends Component {
     const {
       children,
       className,
-      optionRef,
-      option,
-      onClick, // eslint-disable-line no-unused-vars
-      onEnterKey, // eslint-disable-line no-unused-vars
       disabled,
       isFocused,
+      onClick, // eslint-disable-line no-unused-vars
+      onEnterKey, // eslint-disable-line no-unused-vars
+      option,
+      optionRef,
       ...rest
     } = this.props;
 
@@ -62,15 +63,15 @@ export class EuiComboBoxOption extends Component {
 
     return (
       <button
-        role="option"
-        type="button"
+        aria-disabled={disabled}
         aria-selected={isFocused}
         className={classes}
         onClick={this.onClick}
         onKeyDown={this.onKeyDown}
         ref={optionRef}
-        aria-disabled={disabled}
+        role="option"
         title={label}
+        type="button"
         {...rest}>
         {children}
       </button>
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
similarity index 72%
rename from src/components/combo_box/combo_box_options_list/combo_box_options_list.js
rename to src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index 0d348be2d8e..7b21050ef14 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.js
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, Ref, ReactNode } from 'react';
 import classNames from 'classnames';
-import { List } from 'react-virtualized';
+import { List, ListProps } from 'react-virtualized';
 
-import { EuiCode } from '../../code';
+// https://github.com/elastic/eui/pull/2835
+import { EuiCode } from '@elastic/eui'; // eslint-disable-line import/no-unresolved
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiHighlight } from '../../highlight';
 import { EuiPanel } from '../../panel';
@@ -12,46 +12,66 @@ import { EuiLoadingSpinner } from '../../loading';
 import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
+import { EuiPanelProps } from '../../panel/panel';
+import { EuiComboBoxOptionProps } from './combo_box_option';
+import { EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition } from '..';
+import { htmlIdGenerator } from '../../../services';
 
-const positionToClassNameMap = {
+const positionToClassNameMap: {
+  [position in EuiComboBoxOptionsListPosition]: string
+} = {
   top: 'euiComboBoxOptionsList--top',
   bottom: 'euiComboBoxOptionsList--bottom',
 };
 
-const POSITIONS = Object.keys(positionToClassNameMap);
-
 const OPTION_CONTENT_CLASSNAME = 'euiComboBoxOption__content';
 
-export class EuiComboBoxOptionsList extends Component {
-  static propTypes = {
-    options: PropTypes.array,
-    isLoading: PropTypes.bool,
-    selectedOptions: PropTypes.array,
-    onCreateOption: PropTypes.func,
-    searchValue: PropTypes.string,
-    matchingOptions: PropTypes.array,
-    optionRef: PropTypes.func,
-    onOptionClick: PropTypes.func,
-    onOptionEnterKey: PropTypes.func,
-    areAllOptionsSelected: PropTypes.bool,
-    getSelectedOptionForSearchValue: PropTypes.func,
-    updatePosition: PropTypes.func.isRequired,
-    position: PropTypes.oneOf(POSITIONS),
-    listRef: PropTypes.func.isRequired,
-    renderOption: PropTypes.func,
-    width: PropTypes.number,
-    scrollToIndex: PropTypes.number,
-    onScroll: PropTypes.func,
-    rowHeight: PropTypes.number,
-    fullWidth: PropTypes.bool,
-    activeOptionIndex: PropTypes.number,
-    rootId: PropTypes.func.isRequired,
-    onCloseList: PropTypes.func.isRequired,
-  };
+export interface EuiComboBoxOptionsListProps<T> {
+  'data-test-subj': string;
+  activeOptionIndex?: number;
+  areAllOptionsSelected?: boolean;
+  fullWidth?: boolean;
+  getSelectedOptionForSearchValue?: (
+    searchValue: string,
+    selectedOptions: any[]
+  ) => EuiComboBoxOptionOption<T>;
+  isLoading?: boolean;
+  listRef: EuiPanelProps['panelRef'];
+  matchingOptions?: Array<EuiComboBoxOptionOption<T>>;
+
+  onCloseList: EuiComboBoxOptionProps<T>['onClick'];
+  onCreateOption?: (
+    searchValue: string,
+    options: Array<EuiComboBoxOptionOption<T>>
+  ) => boolean;
+  onOptionClick?: (option: EuiComboBoxOptionOption<T>) => void;
+  onOptionEnterKey?: EuiComboBoxOptionProps<T>['onClick'];
+  onScroll?: ListProps['onScroll'];
+  optionRef?: EuiComboBoxOptionProps<T>['optionRef'];
+  options: Array<EuiComboBoxOptionOption<T>>;
+  position?: EuiComboBoxOptionsListPosition;
+  renderOption?: (
+    option: EuiComboBoxOptionOption<T>,
+    searchValue: string,
+    OPTION_CONTENT_CLASSNAME: string
+  ) => ReactNode;
+  rootId: ReturnType<typeof htmlIdGenerator>;
+  rowHeight: number;
+  scrollToIndex?: number;
+  searchValue?: string;
+  selectedOptions: Array<EuiComboBoxOptionOption<T>>;
+  updatePosition: (parameter?: UIEvent | EuiPanelProps['panelRef']) => void;
+  width: number;
+}
+
+export class EuiComboBoxOptionsList<T> extends Component<
+  EuiComboBoxOptionsListProps<T>
+  > {
+  list: Ref<HTMLDivElement>;
 
   static defaultProps = {
-    rowHeight: 27, // row height of default option renderer
     'data-test-subj': '',
+    rowHeight: 27, // row height of default option renderer
   };
 
   updatePosition = () => {
@@ -80,7 +100,7 @@ export class EuiComboBoxOptionsList extends Component {
     }, 500);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: EuiComboBoxOptionsListProps<T>) {
     const { options, selectedOptions, searchValue } = prevProps;
 
     // We don't compare matchingOptions because that will result in a loop.
@@ -97,50 +117,50 @@ export class EuiComboBoxOptionsList extends Component {
     document.body.classList.remove('euiBody-hasPortalContent');
     window.removeEventListener('resize', this.updatePosition);
     window.removeEventListener('scroll', this.closeListOnScroll, {
-      passive: true,
       capture: true,
+      passive: true,
     });
   }
 
-  closeListOnScroll = e => {
-    // close the list when a scroll event happens, but not if the scroll happened in the options list
-    // this mirrors Firefox's approach of auto-closing `select` elements onscroll
-    if (this.list && this.list.contains(e.target) === false) {
+  closeListOnScroll = (event: Event) => {
+    // Close the list when a scroll event happens, but not if the scroll happened in the options list.
+    // This mirrors Firefox's approach of auto-closing `select` elements onscroll.
+    if (this.list && this.list.contains(event.target) === false) {
       this.props.onCloseList();
     }
   };
 
-  listRef = node => {
+  listRef: Ref<HTMLDivElement> = node => {
     this.props.listRef(node);
     this.list = node;
   };
 
   render() {
     const {
-      options,
+      'data-test-subj': dataTestSubj,
+      activeOptionIndex,
+      areAllOptionsSelected,
+      fullWidth,
+      getSelectedOptionForSearchValue,
       isLoading,
-      selectedOptions,
-      onCreateOption,
-      searchValue,
+      listRef,
       matchingOptions,
-      optionRef,
+      onCloseList,
+      onCreateOption,
       onOptionClick,
       onOptionEnterKey,
-      areAllOptionsSelected,
-      getSelectedOptionForSearchValue,
+      onScroll,
+      optionRef,
+      options,
       position,
       renderOption,
-      listRef,
+      rootId,
+      rowHeight,
+      scrollToIndex,
+      searchValue,
+      selectedOptions,
       updatePosition,
       width,
-      scrollToIndex,
-      onScroll,
-      rowHeight,
-      fullWidth,
-      'data-test-subj': dataTestSubj,
-      activeOptionIndex,
-      rootId,
-      onCloseList,
       ...rest
     } = this.props;
 
@@ -204,7 +224,7 @@ export class EuiComboBoxOptionsList extends Component {
           </p>
         );
       }
-    } else if (!options.length) {
+    } else if (!options || options.length === 0) {
       emptyStateContent = (
         <p>
           <EuiI18n
@@ -229,8 +249,8 @@ export class EuiComboBoxOptionsList extends Component {
         {emptyStateContent}
       </EuiText>
     ) : (
-      undefined
-    );
+        undefined
+      );
 
     const numVisibleOptions =
       matchingOptions.length < 7 ? matchingOptions.length : 7;
@@ -238,20 +258,15 @@ export class EuiComboBoxOptionsList extends Component {
 
     const optionsList = (
       <List
-        id={rootId('listbox')}
-        role="listbox"
-        width={width}
         height={height}
-        rowCount={matchingOptions.length}
-        rowHeight={rowHeight}
-        scrollToIndex={scrollToIndex}
+        id={rootId('listbox')}
         onScroll={onScroll}
         rowRenderer={({ key, index, style }) => {
           const option = matchingOptions[index];
           const {
-            value, // eslint-disable-line no-unused-vars
-            label,
             isGroupLabelOption,
+            label,
+            value, // eslint-disable-line no-unused-vars
             ...rest
           } = option;
 
@@ -267,7 +282,9 @@ export class EuiComboBoxOptionsList extends Component {
             <EuiFilterSelectItem
               style={style}
               key={option.label.toLowerCase()}
-              onClick={() => onOptionClick(option)}
+              onClick={() => {
+                onOptionClick(option);
+              }}
               // onEnterKey={onOptionEnterKey}
               ref={optionRef.bind(this, index)}
               isFocused={activeOptionIndex === index}
@@ -278,21 +295,26 @@ export class EuiComboBoxOptionsList extends Component {
               {renderOption ? (
                 renderOption(option, searchValue, OPTION_CONTENT_CLASSNAME)
               ) : (
-                <EuiHighlight
-                  search={searchValue}
-                  className={OPTION_CONTENT_CLASSNAME}>
-                  {label}
-                </EuiHighlight>
-              )}
+                  <EuiHighlight
+                    search={searchValue}
+                    className={OPTION_CONTENT_CLASSNAME}>
+                    {label}
+                  </EuiHighlight>
+                )}
             </EuiFilterSelectItem>
           );
         }}
+        role="listbox"
+        rowCount={matchingOptions.length}
+        rowHeight={rowHeight}
+        scrollToIndex={scrollToIndex}
+        width={width}
       />
     );
 
     const classes = classNames(
       'euiComboBoxOptionsList',
-      positionToClassNameMap[position],
+      position ? positionToClassNameMap[position] : '',
       {
         'euiComboBoxOptionsList--fullWidth': fullWidth,
       }
diff --git a/src/components/combo_box/combo_box_options_list/index.js b/src/components/combo_box/combo_box_options_list/index.ts
similarity index 100%
rename from src/components/combo_box/combo_box_options_list/index.js
rename to src/components/combo_box/combo_box_options_list/index.ts
diff --git a/src/components/combo_box/index.d.ts b/src/components/combo_box/index.d.ts
index 5bf094a420d..cd7d9ec3835 100644
--- a/src/components/combo_box/index.d.ts
+++ b/src/components/combo_box/index.d.ts
@@ -1,108 +1,9 @@
-import {
-  ButtonHTMLAttributes,
-  HTMLAttributes,
-  ReactNode,
-  FunctionComponent,
-  FocusEventHandler,
-} from 'react';
-import { ListProps } from 'react-virtualized'; // eslint-disable-line import/named
-import {
-  EuiComboBoxOption,
+export { EuiComboBoxInputProps } from './combo_box_input/combo_box_input';
+export { EuiComboBoxPillProps } from './combo_box_input/combo_box_pill';
+export {
   EuiComboBoxOptionProps,
-  EuiComboBoxOptionsListPosition,
+} from './combo_box_options_list/combo_box_option';
+export {
   EuiComboBoxOptionsListProps,
-  EuiComboBoxProps,
-} from '@elastic/eui'; // eslint-disable-line import/no-unresolved
-import { RefCallback, CommonProps } from '../common';
-import { EuiPanelProps } from '../panel/panel';
-
-declare module '@elastic/eui' {
-  export type EuiComboBoxOptionProps<
-    T = string | number | string[] | undefined
-  > = CommonProps &
-    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
-      label: string;
-      isGroupLabelOption?: boolean;
-      options?: Array<EuiComboBoxOptionProps<T>>;
-      value?: T;
-    };
-
-  export type EuiComboBoxOptionsListPosition = 'top' | 'bottom';
-
-  export interface EuiComboBoxOption<T> {
-    option: EuiComboBoxOptionProps<T>;
-    children?: ReactNode;
-    className?: string;
-    optionRef?: RefCallback<HTMLButtonElement>;
-    onClick: (option: EuiComboBoxOptionProps<T>) => any;
-    onEnterKey: (option: EuiComboBoxOptionProps<T>) => any;
-    disabled?: boolean;
-  }
-
-  export interface EuiComboBoxOptionsListProps<T> {
-    options?: Array<EuiComboBoxOptionProps<T>>;
-    isLoading?: boolean;
-    selectedOptions?: any[];
-    onCreateOption?: any;
-    searchValue?: string;
-    matchingOptions?: Array<EuiComboBoxOptionProps<T>>;
-    optionRef?: EuiComboBoxOption<T>['optionRef'];
-    onOptionClick?: EuiComboBoxOption<T>['onClick'];
-    onOptionEnterKey?: EuiComboBoxOption<T>['onEnterKey'];
-    areAllOptionsSelected?: boolean;
-    getSelectedOptionForSearchValue?: (
-      searchValue: string,
-      selectedOptions: any[]
-    ) => EuiComboBoxOptionProps<T>;
-    updatePosition: (parameter?: UIEvent | EuiPanelProps['panelRef']) => any;
-    position?: EuiComboBoxOptionsListPosition;
-    listRef: EuiPanelProps['panelRef'];
-    renderOption?: (
-      option: EuiComboBoxOptionProps<T>,
-      searchValue: string,
-      OPTION_CONTENT_CLASSNAME: string
-    ) => ReactNode;
-    width?: number;
-    scrollToIndex?: number;
-    onScroll?: ListProps['onScroll'];
-    rowHeight?: number;
-    fullWidth?: boolean;
-  }
-  export function EuiComboBoxOptionsList<T>(
-    props: EuiComboBoxOptionsListProps<T>
-  ): ReturnType<FunctionComponent<EuiComboBoxOptionsListProps<T>>>;
-
-  export interface EuiComboBoxSingleSelectionShape {
-    asPlainText?: boolean;
-  }
-
-  export interface EuiComboBoxProps<T> {
-    id?: string;
-    isDisabled?: boolean;
-    compressed?: boolean;
-    className?: string;
-    placeholder?: string;
-    isLoading?: boolean;
-    async?: boolean;
-    singleSelection?: EuiComboBoxSingleSelectionShape | boolean;
-    noSuggestions?: boolean;
-    options?: EuiComboBoxOptionsListProps<T>['options'];
-    selectedOptions?: EuiComboBoxOptionsListProps<T>['selectedOptions'];
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    onChange?: (options: Array<EuiComboBoxOptionProps<T>>) => any;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onSearchChange?: (searchValue: string) => any;
-    onCreateOption?: EuiComboBoxOptionsListProps<T>['onCreateOption'];
-    renderOption?: EuiComboBoxOptionsListProps<T>['renderOption'];
-    isInvalid?: boolean;
-    rowHeight?: number;
-    isClearable?: boolean;
-    fullWidth?: boolean;
-    inputRef?: (element: HTMLInputElement) => void;
-  }
-
-  export function EuiComboBox<T>(
-    props: EuiComboBoxProps<T> &
-      Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>
-  ): ReturnType<FunctionComponent<EuiComboBoxProps<T>>>;
-}
+} from './combo_box_options_list/combo_box_options_list';
+export { EuiComboBoxProps } from './combo_box';
diff --git a/src/components/combo_box/index.js b/src/components/combo_box/index.js
deleted file mode 100644
index 3484b23b57b..00000000000
--- a/src/components/combo_box/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { EuiComboBox } from './combo_box';
diff --git a/src/components/combo_box/index.ts b/src/components/combo_box/index.ts
new file mode 100644
index 00000000000..f94279d721d
--- /dev/null
+++ b/src/components/combo_box/index.ts
@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+
+export { EuiComboBox } from './combo_box';
+
+export type EuiComboBoxOptionOption<
+  T = string | number | string[] | undefined
+> = CommonProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
+    isGroupLabelOption?: boolean;
+    label: string;
+    options?: Array<EuiComboBoxOptionOption<T>>;
+    value?: T;
+  };
+
+export type EuiComboBoxOptionsListPosition = 'top' | 'bottom';
diff --git a/src/components/combo_box/matching_options.test.ts b/src/components/combo_box/matching_options.test.ts
index 113ca4c6300..808be420161 100644
--- a/src/components/combo_box/matching_options.test.ts
+++ b/src/components/combo_box/matching_options.test.ts
@@ -1,8 +1,8 @@
-import { EuiComboBoxOptionProps } from '@elastic/eui'; // eslint-disable-line import/no-unresolved
+import { EuiComboBoxOptionOption } from './index';
 import {
   flattenOptionGroups,
-  getSelectedOptionForSearchValue,
   getMatchingOptions,
+  getSelectedOptionForSearchValue,
 } from './matching_options';
 
 const options = [
@@ -82,18 +82,16 @@ describe('getSelectedOptionForSearchValue', () => {
   });
 });
 
-interface GetMatchingOptionsTestCase<T> {
-  options: Array<EuiComboBoxOptionProps<T>>;
-  selectedOptions: Array<EuiComboBoxOptionProps<T>>;
-  searchValue: string;
+interface GetMatchingOptionsTestCase {
+  expected: EuiComboBoxOptionOption[];
   isPreFiltered: boolean;
+  options: EuiComboBoxOptionOption[];
+  searchValue: string;
+  selectedOptions: EuiComboBoxOptionOption[];
   showPrevSelected: boolean;
-  expected: Array<EuiComboBoxOptionProps<T>>;
 }
 
-const testCases: Array<
-  GetMatchingOptionsTestCase<{ [key: string]: string }>
-> = [
+const testCases: GetMatchingOptionsTestCase[] = [
   {
     options,
     selectedOptions: [
diff --git a/src/components/combo_box/matching_options.ts b/src/components/combo_box/matching_options.ts
index 4b47d93f8a2..bcd55170ff1 100644
--- a/src/components/combo_box/matching_options.ts
+++ b/src/components/combo_box/matching_options.ts
@@ -1,12 +1,12 @@
-import { EuiComboBoxOptionProps } from '@elastic/eui'; // eslint-disable-line import/no-unresolved
+import { EuiComboBoxOptionOption } from './index';
 
 export const flattenOptionGroups = <T>(
-  optionsOrGroups: Array<EuiComboBoxOptionProps<T>>
+  optionsOrGroups: Array<EuiComboBoxOptionOption<T>>
 ) => {
   return optionsOrGroups.reduce(
     (
-      options: Array<EuiComboBoxOptionProps<T>>,
-      optionOrGroup: EuiComboBoxOptionProps<T>
+      options: Array<EuiComboBoxOptionOption<T>>,
+      optionOrGroup: EuiComboBoxOptionOption<T>
     ) => {
       if (optionOrGroup.options) {
         options.push(...optionOrGroup.options);
@@ -21,7 +21,7 @@ export const flattenOptionGroups = <T>(
 
 export const getSelectedOptionForSearchValue = <T>(
   searchValue: string,
-  selectedOptions: Array<EuiComboBoxOptionProps<T>>
+  selectedOptions: Array<EuiComboBoxOptionOption<T>>
 ) => {
   const normalizedSearchValue = searchValue.toLowerCase();
   return selectedOptions.find(
@@ -30,9 +30,9 @@ export const getSelectedOptionForSearchValue = <T>(
 };
 
 const collectMatchingOption = <T>(
-  accumulator: Array<EuiComboBoxOptionProps<T>>,
-  option: EuiComboBoxOptionProps<T>,
-  selectedOptions: Array<EuiComboBoxOptionProps<T>>,
+  accumulator: Array<EuiComboBoxOptionOption<T>>,
+  option: EuiComboBoxOptionOption<T>,
+  selectedOptions: Array<EuiComboBoxOptionOption<T>>,
   normalizedSearchValue: string,
   isPreFiltered: boolean,
   showPrevSelected: boolean
@@ -64,19 +64,19 @@ const collectMatchingOption = <T>(
 };
 
 export const getMatchingOptions = <T>(
-  options: Array<EuiComboBoxOptionProps<T>>,
-  selectedOptions: Array<EuiComboBoxOptionProps<T>>,
+  options: Array<EuiComboBoxOptionOption<T>>,
+  selectedOptions: Array<EuiComboBoxOptionOption<T>>,
   searchValue: string,
   isPreFiltered: boolean,
   showPrevSelected: boolean
 ) => {
   const normalizedSearchValue = searchValue.trim().toLowerCase();
-  const matchingOptions: Array<EuiComboBoxOptionProps<T>> = [];
+  const matchingOptions: Array<EuiComboBoxOptionOption<T>> = [];
 
   options.forEach(option => {
     if (option.options) {
-      const matchingOptionsForGroup: Array<EuiComboBoxOptionProps<T>> = [];
-      option.options.forEach((groupOption: EuiComboBoxOptionProps<T>) => {
+      const matchingOptionsForGroup: Array<EuiComboBoxOptionOption<T>> = [];
+      option.options.forEach((groupOption: EuiComboBoxOptionOption<T>) => {
         collectMatchingOption(
           matchingOptionsForGroup,
           groupOption,
diff --git a/yarn.lock b/yarn.lock
index 3b78ccecb33..ac1d628ff44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1307,6 +1307,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-input-autosize@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.0.1.tgz#04ac4b532128c98532352042b6c7af8b5d3f52ca"
+  integrity sha512-vsmqA6Pp5IyMZv3C7x7mNM8lqikfWQ4lCWsoVk/w+HZ2Y3KOdFk6ad4jsQeltXn/UaO+YUZLtWdMIjLLIeCxBA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-is@^16.7.1":
   version "16.7.1"
   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-16.7.1.tgz#d3f1c68c358c00ce116b55ef5410cf486dd08539"
@@ -1335,6 +1342,11 @@
   resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.1.tgz#9b7cdae9cdc8b1a7020ca7588018dac64c770866"
   integrity sha512-5/bJS/uGB5kmpRrrAWXQnmyKlv+4TlPn4f+A2NBa93p+mt6Ht+YcNGkQKf8HMx28a9hox49ZXShtbGqZkk41Sw==
 
+"@types/sinon@^7.5.1":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-7.5.1.tgz#d27b81af0d1cfe1f9b24eebe7a24f74ae40f5b7c"
+  integrity sha512-EZQUP3hSZQyTQRfiLqelC9NMWd1kqLcmQE0dMiklxBkgi84T+cHOhnKpgk4NnOWpGX863yE6+IaGnOXUNFqDnQ==
+
 "@types/tabbable@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@types/tabbable/-/tabbable-3.1.0.tgz#540d4c2729872560badcc220e73c9412c1d2bffe"

From f9092771dde0f8a3b49d241028492a98f700284f Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Tue, 18 Feb 2020 16:28:38 -0500
Subject: [PATCH 02/13] organizes exports/imports, adjusts refs, minor
 fixes/adjustments

---
 src/components/combo_box/combo_box.test.tsx   |  40 ++--
 src/components/combo_box/combo_box.tsx        | 189 +++++++++---------
 .../combo_box_input/combo_box_input.tsx       |  92 +++++----
 .../combo_box/combo_box_input/index.ts        |   3 +-
 .../combo_box_options_list.tsx                |  64 +++---
 .../combo_box/combo_box_options_list/index.ts |   7 +-
 src/components/combo_box/index.d.ts           |   9 -
 src/components/combo_box/index.ts             |   8 +-
 8 files changed, 215 insertions(+), 197 deletions(-)
 delete mode 100644 src/components/combo_box/index.d.ts

diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx
index 9cf3a228b41..409d3232a02 100644
--- a/src/components/combo_box/combo_box.test.tsx
+++ b/src/components/combo_box/combo_box.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { shallow, render, mount } from 'enzyme';
 import sinon from 'sinon';
 import {
@@ -11,7 +11,7 @@ import { comboBoxKeyCodes } from '../../services';
 import { EuiComboBox } from './combo_box';
 
 jest.mock('../portal', () => ({
-  EuiPortal: ({ children }) => children,
+  EuiPortal: ({ children }: { children: ReactNode }) => children,
 }));
 
 // Mock the htmlIdGenerator to generate predictable ids for snapshot tests
@@ -71,7 +71,7 @@ describe('EuiComboBox', () => {
 describe('props', () => {
   test('options list is rendered', () => {
     const component = mount(
-      <EuiComboBox<TitanOption>
+      <EuiComboBox
         options={options}
         data-test-subj="alsoGetsAppliedToOptionsList"
       />
@@ -83,7 +83,7 @@ describe('props', () => {
 
   test('selectedOptions are rendered', () => {
     const component = shallow(
-      <EuiComboBox<TitanOption>
+      <EuiComboBox
         options={options}
         selectedOptions={[options[2], options[4]]}
       />
@@ -95,7 +95,7 @@ describe('props', () => {
   describe('isClearable=false disallows user from clearing input', () => {
     test('when no options are selected', () => {
       const component = shallow(
-        <EuiComboBox<TitanOption> options={options} isClearable={false} />
+        <EuiComboBox options={options} isClearable={false} />
       );
 
       expect(component).toMatchSnapshot();
@@ -103,7 +103,7 @@ describe('props', () => {
 
     test('when options are selected', () => {
       const component = shallow(
-        <EuiComboBox<TitanOption>
+        <EuiComboBox
           options={options}
           selectedOptions={[options[2], options[4]]}
           isClearable={false}
@@ -117,7 +117,7 @@ describe('props', () => {
   describe('singleSelection', () => {
     test('is rendered', () => {
       const component = shallow(
-        <EuiComboBox<TitanOption>
+        <EuiComboBox
           options={options}
           selectedOptions={[options[2]]}
           singleSelection={true}
@@ -128,7 +128,7 @@ describe('props', () => {
     });
     test('selects existing option when opened', () => {
       const component = shallow(
-        <EuiComboBox<TitanOption>
+        <EuiComboBox
           options={options}
           selectedOptions={[options[2]]}
           singleSelection={true}
@@ -142,7 +142,7 @@ describe('props', () => {
 
   test('isDisabled is rendered', () => {
     const component = shallow(
-      <EuiComboBox<TitanOption>
+      <EuiComboBox
         options={options}
         selectedOptions={[options[2]]}
         isDisabled={true}
@@ -154,7 +154,7 @@ describe('props', () => {
 
   test('full width is rendered', () => {
     const component = shallow(
-      <EuiComboBox<TitanOption>
+      <EuiComboBox
         options={options}
         selectedOptions={[options[2]]}
         fullWidth={true}
@@ -171,7 +171,7 @@ describe('behavior', () => {
       const onCreateOptionHandler = sinon.spy();
 
       const component = mount(
-        <EuiComboBox<TitanOption>
+        <EuiComboBox
           options={options}
           selectedOptions={[options[2]]}
           onCreateOption={onCreateOptionHandler}
@@ -190,7 +190,7 @@ describe('behavior', () => {
       const onCreateOptionHandler = sinon.spy();
 
       const component = mount(
-        <EuiComboBox<TitanOption>
+        <EuiComboBox
           options={options}
           selectedOptions={[options[2]]}
           onCreateOption={onCreateOptionHandler}
@@ -209,10 +209,7 @@ describe('behavior', () => {
       const onKeyDownWrapper = jest.fn();
       const component = mount(
         <div onKeyDown={onKeyDownWrapper}>
-          <EuiComboBox<TitanOption>
-            options={options}
-            selectedOptions={[options[2]]}
-          />
+          <EuiComboBox options={options} selectedOptions={[options[2]]} />
         </div>
       );
 
@@ -236,7 +233,7 @@ describe('behavior', () => {
       const onCreateOptionHandler = sinon.spy();
 
       const component = mount(
-        <EuiComboBox<TitanOption>
+        <EuiComboBox
           options={options}
           selectedOptions={[options[2]]}
           onCreateOption={onCreateOptionHandler}
@@ -261,10 +258,7 @@ describe('behavior', () => {
       const onKeyDownWrapper = jest.fn();
       const component = mount(
         <div onKeyDown={onKeyDownWrapper}>
-          <EuiComboBox<TitanOption>
-            options={options}
-            selectedOptions={[options[2]]}
-          />
+          <EuiComboBox options={options} selectedOptions={[options[2]]} />
         </div>
       );
 
@@ -292,7 +286,7 @@ describe('behavior', () => {
     test('calls onChange callback with empty array', () => {
       const onChangeHandler = sinon.spy();
       const component = mount(
-        <EuiComboBox<TitanOption>
+        <EuiComboBox
           options={options}
           selectedOptions={[options[2]]}
           onChange={onChangeHandler}
@@ -306,7 +300,7 @@ describe('behavior', () => {
 
     test('focuses the input', () => {
       const component = mount(
-        <EuiComboBox<TitanOption>
+        <EuiComboBox
           options={options}
           selectedOptions={[options[2]]}
           onChange={() => {}}
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index ffc3d8612dc..b79ac732197 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -1,10 +1,17 @@
 /**
  * Elements within EuiComboBox which would normally be tabbable (inputs, buttons) have been removed
- * from the tab order with tabindex="-1" so that we can control the keyboard navigation interface.
+ * from the tab order with tabindex={-1} so that we can control the keyboard navigation interface.
  */
 /* eslint-disable jsx-a11y/role-has-required-aria-props */
 
-import React, { Component, Ref, FocusEventHandler, KeyboardEvent } from 'react';
+import React, {
+  Component,
+  Ref,
+  FocusEventHandler,
+  KeyboardEvent,
+  createRef,
+  RefObject,
+} from 'react';
 import classNames from 'classnames';
 
 import {
@@ -21,14 +28,16 @@ import {
   flattenOptionGroups,
   getSelectedOptionForSearchValue,
 } from './matching_options';
-import { EuiComboBoxSingleSelectionShape, EuiComboBoxInputProps, EuiComboBoxInput } from './combo_box_input/combo_box_input';
+import {
+  EuiComboBoxInputProps,
+  EuiComboBoxInput,
+} from './combo_box_input/combo_box_input';
 import { EuiComboBoxOptionsListProps } from './combo_box_options_list/combo_box_options_list';
 import {
   EuiComboBoxOptionOption,
   EuiComboBoxOptionsListPosition,
+  EuiComboBoxSingleSelectionShape,
 } from './index';
-import { EuiPanelProps } from '../panel/panel';
-import { RefCallback } from '../common';
 
 type DrillProps<T> = Pick<
   EuiComboBoxOptionsListProps<T>,
@@ -42,15 +51,15 @@ export interface EuiComboBoxProps<T> extends DrillProps<T> {
   compressed: boolean;
   fullWidth: boolean;
   id?: string;
-  inputRef?: RefCallback<HTMLInputElement>;
+  inputRef?: RefObject<HTMLInputElement>;
   isClearable: boolean;
   isDisabled?: boolean;
   isInvalid?: boolean;
   isLoading?: boolean;
   noSuggestions?: boolean;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onChange?: <T>(options: Array<EuiComboBoxOptionOption<T>>) => void;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLDivElement>;
+  onChange?: (options: Array<EuiComboBoxOptionOption<T>>) => void;
+  onFocus?: FocusEventHandler<HTMLDivElement>;
   onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
   onSearchChange?: (searchValue: string, hasMatchingOptions?: boolean) => void;
   placeholder?: string;
@@ -62,7 +71,7 @@ interface EuiComboBoxState<T> {
   activeOptionIndex: number;
   hasFocus: boolean;
   isListOpen: boolean;
-  listElement?: UIEvent | EuiPanelProps['panelRef'];
+  listElement?: RefObject<HTMLDivElement>;
   listPosition: EuiComboBoxOptionsListPosition;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   searchValue: string;
@@ -74,7 +83,7 @@ const initialSearchValue = '';
 export class EuiComboBox<T> extends Component<
   EuiComboBoxProps<T>,
   EuiComboBoxState<T>
-  > {
+> {
   static defaultProps = {
     async: false,
     compressed: false,
@@ -106,12 +115,12 @@ export class EuiComboBox<T> extends Component<
   rootId = htmlIdGenerator();
 
   // Refs
-  comboBox: HTMLDivElement | null = null;
-  autoSizeInput: HTMLInputElement | null = null;
-  searchInput: HTMLInputElement | null = null;
-  optionsList: HTMLInputElement | null = null;
-  toggleButton: HTMLInputElement | null = null;
-  options: Array<HTMLDivElement | null> = [];
+  comboBoxRef = createRef<HTMLDivElement>();
+  autoSizeInput = createRef<HTMLInputElement>();
+  searchInputRef = createRef<HTMLInputElement>();
+  listRef = createRef<HTMLInputElement>();
+  toggleButtonRef = createRef<HTMLButtonElement | HTMLSpanElement>();
+  optionsRefs = [createRef<HTMLDivElement>()];
 
   openList = () => {
     this.setState({
@@ -127,7 +136,7 @@ export class EuiComboBox<T> extends Component<
   };
 
   updateListPosition = (
-    listElement: UIEvent | EuiPanelProps['panelRef'] = this.state.listElement
+    listElement: RefObject<HTMLDivElement> | undefined = this.state.listElement
   ) => {
     if (!this._isMounted) {
       return;
@@ -137,36 +146,38 @@ export class EuiComboBox<T> extends Component<
       return;
     }
 
-    if (!listElement) {
+    if (!listElement || !listElement.current) {
       return;
     }
 
     // it's possible that updateListPosition is called when listElement is becoming visible, but isn't yet
-    const listElementBounds = listElement.getBoundingClientRect();
+    const listElementBounds = listElement.current.getBoundingClientRect();
     if (listElementBounds.width === 0 || listElementBounds.height === 0) {
       return;
     }
 
-    if (!this.comboBox) {
+    if (!this.comboBoxRef.current) {
       return;
     }
 
-    const comboBoxBounds = this.comboBox.getBoundingClientRect();
+    const comboBoxBounds = this.comboBoxRef.current.getBoundingClientRect();
 
     const { position, top } = findPopoverPosition({
       allowCrossAxis: false,
-      anchor: this.comboBox,
-      popover: listElement,
+      anchor: this.comboBoxRef.current,
+      popover: listElement.current,
       position: 'bottom',
-    });
+    }) as { position: 'bottom'; top: number };
 
-    this.optionsList.style.top = `${top}px`;
-    // listElement doesn't have its width set until after updating the position
-    // which means the popover service won't know about the correct width
-    // however, we already know where to position the element
-    this.optionsList.style.left = `${comboBoxBounds.left +
-      window.pageXOffset}px`;
-    this.optionsList.style.width = `${comboBoxBounds.width}px`;
+    if (this.listRef.current) {
+      this.listRef.current.style.top = `${top}px`;
+      // listElement doesn't have its width set until after updating the position
+      // which means the popover service won't know about the correct width
+      // however, we already know where to position the element
+      this.listRef.current.style.left = `${comboBoxBounds.left +
+        window.pageXOffset}px`;
+      this.listRef.current.style.width = `${comboBoxBounds.width}px`;
+    }
 
     // Cache for future calls.
     this.setState({
@@ -357,22 +368,25 @@ export class EuiComboBox<T> extends Component<
      * FireFox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`.
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/explicitOriginalTarget
      */
-    const relatedTarget =
-      event.relatedTarget ||
-      // @ts-ignore
-      (event.explicitOriginalTarget as EventTarget | null);
+    const relatedTarget = (event.relatedTarget ||
+      // @ts-ignore need to add window global override
+      event.explicitOriginalTarget) as (EventTarget | null);
 
     const focusedInOptionsList =
       relatedTarget &&
-      this.optionsList &&
-      this.optionsList.contains(relatedTarget);
+      this.listRef.current &&
+      this.listRef.current.contains(relatedTarget);
     const focusedInInput =
-      relatedTarget && this.comboBox && this.comboBox.contains(relatedTarget);
+      relatedTarget &&
+      this.comboBoxRef.current &&
+      this.comboBoxRef.current.contains(relatedTarget);
     if (!focusedInOptionsList && !focusedInInput) {
       this.closeList();
 
       if (this.props.onBlur) {
-        this.props.onBlur(event);
+        this.props.onBlur((event as unknown) as React.FocusEvent<
+          HTMLDivElement
+        >);
       }
       this.setState({ hasFocus: false });
 
@@ -443,15 +457,15 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
-  onOptionEnterKey = <T extends {}>(option: EuiComboBoxOptionOption<T>) => {
+  onOptionEnterKey = (option: EuiComboBoxOptionOption<T>) => {
     this.onAddOption(option);
   };
 
-  onOptionClick = <T extends {}>(option: EuiComboBoxOptionOption<T>) => {
+  onOptionClick = (option: EuiComboBoxOptionOption<T>) => {
     this.onAddOption(option);
   };
 
-  onAddOption = <T extends {}>(
+  onAddOption = (
     addedOption: EuiComboBoxOptionOption<T>,
     isContainerBlur?: boolean
   ) => {
@@ -462,7 +476,7 @@ export class EuiComboBox<T> extends Component<
     const { onChange, selectedOptions, singleSelection } = this.props;
     const changeOptions = Boolean(singleSelection)
       ? [addedOption]
-      : [...(selectedOptions as Array<typeof addedOption>), addedOption];
+      : [...selectedOptions, addedOption];
 
     if (onChange) {
       onChange(changeOptions);
@@ -472,8 +486,8 @@ export class EuiComboBox<T> extends Component<
     this.clearActiveOption();
 
     if (!isContainerBlur) {
-      if (this.searchInput) {
-        this.searchInput.focus();
+      if (this.searchInputRef.current) {
+        this.searchInputRef.current.focus();
       }
     }
 
@@ -482,9 +496,7 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
-  onRemoveOption = <T extends {}>(
-    removedOption: EuiComboBoxOptionOption<T>
-  ) => {
+  onRemoveOption = (removedOption: EuiComboBoxOptionOption<T>) => {
     const { onChange, selectedOptions } = this.props;
     if (onChange) {
       onChange(selectedOptions.filter(option => option !== removedOption));
@@ -501,8 +513,8 @@ export class EuiComboBox<T> extends Component<
 
     // Clicking the clear button will also cause it to disappear. This would result in focus
     // shifting unexpectedly to the body element so we set it to the input which is more reasonable,
-    if (this.searchInput) {
-      this.searchInput.focus();
+    if (this.searchInputRef.current) {
+      this.searchInputRef.current.focus();
     }
 
     if (!this.state.isListOpen) {
@@ -512,8 +524,8 @@ export class EuiComboBox<T> extends Component<
 
   onComboBoxClick = () => {
     // When the user clicks anywhere on the box, enter the interaction state.
-    if (this.searchInput) {
-      this.searchInput.focus();
+    if (this.searchInputRef.current) {
+      this.searchInputRef.current.focus();
     }
 
     // If the user does this from a state in which an option has focus, then we need to reset it or clear it.
@@ -529,8 +541,8 @@ export class EuiComboBox<T> extends Component<
   };
 
   onOpenListClick = () => {
-    if (this.searchInput) {
-      this.searchInput.focus();
+    if (this.searchInputRef.current) {
+      this.searchInputRef.current.focus();
     }
     if (!this.state.isListOpen) {
       this.openList();
@@ -555,46 +567,32 @@ export class EuiComboBox<T> extends Component<
     });
   };
 
-  comboBoxRef: Ref<HTMLDivElement> = node => {
+  ownRef: Ref<HTMLDivElement> = node => {
     // IE11 doesn't support the `relatedTarget` event property for blur events
     // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-    if (this.comboBox) {
-      this.comboBox.removeEventListener('focusout', this.onContainerBlur);
+    if (this.comboBoxRef.current) {
+      this.comboBoxRef.current.removeEventListener(
+        'focusout',
+        this.onContainerBlur
+      );
     }
 
-    this.comboBox = node;
+    this.comboBoxRef.current = node;
 
-    if (this.comboBox) {
-      this.comboBox.addEventListener('focusout', this.onContainerBlur);
-      const comboBoxBounds = this.comboBox.getBoundingClientRect();
+    if (this.comboBoxRef.current) {
+      this.comboBoxRef.current.addEventListener(
+        'focusout',
+        this.onContainerBlur
+      );
+      const comboBoxBounds = this.comboBoxRef.current.getBoundingClientRect();
       this.setState({
         width: comboBoxBounds.width,
       });
     }
   };
 
-  autoSizeInputef: Ref<HTMLInputElement> = node => {
-    this.autoSizeInput = node = null;
-  };
-
-  searchInputRef: Ref<HTMLInputElement> = node => {
-    const { inputRef } = this.props;
-    this.searchInput = node;
-    if (inputRef && node !== null) {
-      inputRef(node);
-    }
-  };
-
-  optionsListRef: Ref<HTMLInputElement> = node => {
-    this.optionsList = node;
-  };
-
-  optionRef = (index: number, node: HTMLDivElement | null) => {
-    this.options[index] = node;
-  };
-
-  toggleButtonRef: Ref<HTMLDivElement> = node => {
-    this.toggleButton = node;
+  optionRef = (index: number, node: RefObject<HTMLDivElement>) => {
+    this.optionsRefs[index] = node;
   };
 
   componentDidMount() {
@@ -602,7 +600,10 @@ export class EuiComboBox<T> extends Component<
 
     // TODO: This will need to be called once the actual stylesheet loads.
     setTimeout(() => {
-      if (this.autoSizeInput) {
+      if (this.autoSizeInput.current) {
+        /*
+        NOTE_TO_SELF(dimitri): this either needs an issue (I couldn't find one) or needs to be removed.
+        */
         this.autoSizeInputcopyInputStyles() = null;
       }
     }, 100);
@@ -634,7 +635,7 @@ export class EuiComboBox<T> extends Component<
     return stateUpdate;
   }
 
-  updateMatchingOptionsIfDifferent = <T extends {}>(
+  updateMatchingOptionsIfDifferent = (
     newMatchingOptions: Array<EuiComboBoxOptionOption<T>>
   ) => {
     const { matchingOptions, activeOptionIndex } = this.state;
@@ -654,7 +655,7 @@ export class EuiComboBox<T> extends Component<
     }
 
     if (areOptionsDifferent) {
-      this.options = [];
+      this.optionsRefs = [];
       let nextActiveOptionIndex = activeOptionIndex;
       // ensure that the currently selected single option is active if it is in the matchingOptions
       if (singleSelection && selectedOptions.length === 1) {
@@ -676,7 +677,7 @@ export class EuiComboBox<T> extends Component<
         }
       }
     }
-  }
+  };
 
   componentDidUpdate() {
     const { options, selectedOptions, singleSelection } = this.props;
@@ -769,15 +770,15 @@ export class EuiComboBox<T> extends Component<
             data-test-subj={optionsListDataTestSubj}
             fullWidth={fullWidth}
             isLoading={isLoading}
-            listRef={this.optionsListRef}
+            listRef={this.listRef}
             matchingOptions={this.state.matchingOptions}
             onCloseList={this.closeList}
             onCreateOption={onCreateOption}
             onOptionClick={this.onOptionClick}
             onOptionEnterKey={this.onOptionEnterKey}
             onScroll={() => {
-              if (this.searchInput) {
-                this.searchInput.focus();
+              if (this.searchInputRef.current) {
+                this.searchInputRef.current.focus();
               }
             }}
             optionRef={this.optionRef}
@@ -815,10 +816,10 @@ export class EuiComboBox<T> extends Component<
         className={classes}
         data-test-subj={dataTestSubj}
         onKeyDown={this.onKeyDown}
-        ref={this.comboBoxRef}
+        ref={this.ownRef}
         role="combobox">
         <EuiComboBoxInput
-          autoSizeInputef={this.autoSizeInputef}
+          autoSizeInputRef={this.autoSizeInput}
           compressed={compressed}
           focusedOptionId={
             this.hasActiveOption()
@@ -828,7 +829,7 @@ export class EuiComboBox<T> extends Component<
           fullWidth={fullWidth}
           hasSelectedOptions={selectedOptions.length > 0}
           id={id}
-          inputRef={this.searchInputRef}
+          inputRef={inputRef}
           isDisabled={isDisabled}
           isListOpen={isListOpen}
           noIcon={!!noSuggestions}
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index 78ea1ed8d01..e9d79124881 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -1,4 +1,4 @@
-import React, { Component, Ref, FocusEventHandler } from 'react';
+import React, { Component, FocusEventHandler, RefObject } from 'react';
 import classNames from 'classnames';
 import AutosizeInput from 'react-input-autosize';
 
@@ -6,24 +6,19 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFormControlLayout } from '../../form/form_control_layout';
 import { EuiComboBoxPill } from './combo_box_pill';
 import { htmlIdGenerator } from '../../../services';
-import { EuiComboBoxOptionOption } from '..';
-import { EuiFormControlLayoutCustomIconProps } from '../../form/form_control_layout/form_control_layout_custom_icon';
+import { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape } from '..';
 import { EuiFormControlLayoutIconsProps } from '../../form/form_control_layout/form_control_layout_icons';
 
 const makeId = htmlIdGenerator();
 
-export interface EuiComboBoxSingleSelectionShape {
-  asPlainText?: boolean;
-}
-
 export interface EuiComboBoxInputProps<T> {
-  autoSizeInputRef?: Ref<HTMLInputElement>;
+  autoSizeInputRef?: RefObject<HTMLInputElement>;
   compressed: boolean;
   focusedOptionId?: string;
   fullWidth?: boolean;
   hasSelectedOptions: boolean;
   id?: string;
-  inputRef?: HTMLInputElement | null;
+  inputRef?: RefObject<HTMLInputElement>;
   isDisabled?: boolean;
   isListOpen: boolean;
   noIcon: boolean;
@@ -37,11 +32,11 @@ export interface EuiComboBoxInputProps<T> {
   onRemoveOption?: (option: EuiComboBoxOptionOption<T>) => void;
   placeholder?: string;
   rootId: ReturnType<typeof htmlIdGenerator>;
-  searchValue?: string;
+  searchValue: string;
   selectedOptions?: Array<EuiComboBoxOptionOption<T>>;
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
-  toggleButtonRef?: EuiFormControlLayoutCustomIconProps['iconRef'];
-  updatePosition: () => void;
+  toggleButtonRef?: RefObject<HTMLButtonElement | HTMLSpanElement>;
+  updatePosition: (listElement?: RefObject<HTMLDivElement> | undefined) => void;
   value?: string;
 }
 
@@ -52,7 +47,7 @@ interface EuiComboBoxInputState {
 export class EuiComboBoxInput<T> extends Component<
   EuiComboBoxInputProps<T>,
   EuiComboBoxInputState
-  > {
+> {
   state: EuiComboBoxInputState = {
     hasFocus: false,
   };
@@ -117,28 +112,35 @@ export class EuiComboBoxInput<T> extends Component<
       value,
     } = this.props;
 
-    const pills = selectedOptions.map(option => {
-      const { label, color, onClick, ...rest } = option;
+    const pills = selectedOptions
+      ? selectedOptions.map(option => {
+          const { label, color, onClick, ...rest } = option;
 
-      const asPlainText = singleSelection && singleSelection.asPlainText;
-      const pillOnClose =
-        isDisabled || singleSelection || onClick ? undefined : onRemoveOption;
-      const pillOnClick = onClick || (() => { });
+          const asPlainText =
+            singleSelection &&
+            typeof singleSelection === 'object' &&
+            singleSelection.asPlainText;
+          const pillOnClose =
+            isDisabled || singleSelection || onClick
+              ? undefined
+              : onRemoveOption;
+          const pillOnClick = onClick || (() => {});
 
-      return (
-        <EuiComboBoxPill
-          option={option}
-          onClose={pillOnClose}
-          key={label.toLowerCase()}
-          color={color}
-          onClick={pillOnClick}
-          onClickAriaLabel={onClick ? 'Change' : undefined}
-          asPlainText={asPlainText}
-          {...rest}>
-          {label}
-        </EuiComboBoxPill>
-      );
-    });
+          return (
+            <EuiComboBoxPill
+              option={option}
+              onClose={pillOnClose}
+              key={label.toLowerCase()}
+              color={color}
+              onClick={pillOnClick}
+              onClickAriaLabel={onClick ? 'Change' : undefined}
+              asPlainText={asPlainText}
+              {...rest}>
+              {label}
+            </EuiComboBoxPill>
+          );
+        })
+      : null;
 
     let removeOptionMessage;
     let removeOptionMessageId;
@@ -147,13 +149,13 @@ export class EuiComboBoxInput<T> extends Component<
       const readPlaceholder = placeholder ? `${placeholder}.` : '';
       const removeOptionMessageContent =
         `Combo box. Selected. ${
-        searchValue ? `${searchValue}. Selected. ` : ''
+          searchValue ? `${searchValue}. Selected. ` : ''
         }${
-        selectedOptions && selectedOptions.length > 0
-          ? `${value}. Press Backspace to delete ${
-          selectedOptions[selectedOptions.length - 1].label
-          }. `
-          : ''
+          selectedOptions && selectedOptions.length > 0
+            ? `${value}. Press Backspace to delete ${
+                selectedOptions[selectedOptions.length - 1].label
+              }. `
+            : ''
         }Combo box input. ${readPlaceholder} Type some text or, to display a list of choices, press Down Arrow. ` +
         'To exit the list of choices, press Escape.';
 
@@ -186,7 +188,6 @@ export class EuiComboBoxInput<T> extends Component<
     }
 
     const clickProps: EuiFormControlLayoutIconsProps = {};
-
     if (!isDisabled && onClear && hasSelectedOptions) {
       clickProps.clear = {
         'data-test-subj': 'comboBoxClearButton',
@@ -194,8 +195,17 @@ export class EuiComboBoxInput<T> extends Component<
       };
     }
 
-    let icon: EuiFormControlLayoutIconsProps['icon'] | undefined;
+    let icon: EuiFormControlLayoutIconsProps['icon'];
     if (!noIcon) {
+      /*
+      NOTE_TO_SELF(dimitri): this problem appears to come from an issue with the type of
+      EuiFormControlLayoutCustomIconProps['iconRef']:
+      ```tsx
+      | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
+      ```
+
+      As I understand it, a `RefObject`, which is what `toggleButtonRef` is, should be accepted, as it is with the `ref` property itself.
+      */
       icon = {
         'aria-label': isListOpen
           ? 'Close list of options'
diff --git a/src/components/combo_box/combo_box_input/index.ts b/src/components/combo_box/combo_box_input/index.ts
index 3835fee08ec..e9ae3ec895a 100644
--- a/src/components/combo_box/combo_box_input/index.ts
+++ b/src/components/combo_box/combo_box_input/index.ts
@@ -1 +1,2 @@
-export { EuiComboBoxInput } from './combo_box_input';
+export { EuiComboBoxInput, EuiComboBoxInputProps } from './combo_box_input';
+export { EuiComboBoxPill, EuiComboBoxPillProps } from './combo_box_pill';
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index 7b21050ef14..deba7e60c84 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -1,4 +1,4 @@
-import React, { Component, Ref, ReactNode } from 'react';
+import React, { Component, ReactNode, RefObject, createRef } from 'react';
 import classNames from 'classnames';
 import { List, ListProps } from 'react-virtualized';
 
@@ -12,10 +12,11 @@ import { EuiLoadingSpinner } from '../../loading';
 import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
-import { EuiPanelProps } from '../../panel/panel';
 import { EuiComboBoxOptionProps } from './combo_box_option';
 import { EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition } from '..';
 import { htmlIdGenerator } from '../../../services';
+import { RefCallback } from '../../common';
+import { EuiComboBoxInputProps } from '../combo_box_input';
 
 const positionToClassNameMap: {
   [position in EuiComboBoxOptionsListPosition]: string
@@ -36,10 +37,10 @@ export interface EuiComboBoxOptionsListProps<T> {
     selectedOptions: any[]
   ) => EuiComboBoxOptionOption<T>;
   isLoading?: boolean;
-  listRef: EuiPanelProps['panelRef'];
-  matchingOptions?: Array<EuiComboBoxOptionOption<T>>;
+  listRef: RefObject<HTMLInputElement>;
+  matchingOptions: Array<EuiComboBoxOptionOption<T>>;
 
-  onCloseList: EuiComboBoxOptionProps<T>['onClick'];
+  onCloseList: EuiComboBoxInputProps<T>['onCloseListClick'];
   onCreateOption?: (
     searchValue: string,
     options: Array<EuiComboBoxOptionOption<T>>
@@ -47,7 +48,7 @@ export interface EuiComboBoxOptionsListProps<T> {
   onOptionClick?: (option: EuiComboBoxOptionOption<T>) => void;
   onOptionEnterKey?: EuiComboBoxOptionProps<T>['onClick'];
   onScroll?: ListProps['onScroll'];
-  optionRef?: EuiComboBoxOptionProps<T>['optionRef'];
+  optionRef?: (index: number, node: RefObject<HTMLDivElement>) => void;
   options: Array<EuiComboBoxOptionOption<T>>;
   position?: EuiComboBoxOptionsListPosition;
   renderOption?: (
@@ -58,16 +59,16 @@ export interface EuiComboBoxOptionsListProps<T> {
   rootId: ReturnType<typeof htmlIdGenerator>;
   rowHeight: number;
   scrollToIndex?: number;
-  searchValue?: string;
+  searchValue: string;
   selectedOptions: Array<EuiComboBoxOptionOption<T>>;
-  updatePosition: (parameter?: UIEvent | EuiPanelProps['panelRef']) => void;
+  updatePosition: (listElement?: RefObject<HTMLDivElement> | undefined) => void;
   width: number;
 }
 
 export class EuiComboBoxOptionsList<T> extends Component<
   EuiComboBoxOptionsListProps<T>
-  > {
-  list: Ref<HTMLDivElement>;
+> {
+  list = createRef<HTMLDivElement>();
 
   static defaultProps = {
     'data-test-subj': '',
@@ -77,7 +78,9 @@ export class EuiComboBoxOptionsList<T> extends Component<
   updatePosition = () => {
     // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
     requestAnimationFrame(() => {
-      this.props.updatePosition(this.list);
+      if (this.list.current) {
+        this.props.updatePosition(this.list);
+      }
     });
   };
 
@@ -118,20 +121,26 @@ export class EuiComboBoxOptionsList<T> extends Component<
     window.removeEventListener('resize', this.updatePosition);
     window.removeEventListener('scroll', this.closeListOnScroll, {
       capture: true,
-      passive: true,
     });
   }
 
   closeListOnScroll = (event: Event) => {
     // Close the list when a scroll event happens, but not if the scroll happened in the options list.
     // This mirrors Firefox's approach of auto-closing `select` elements onscroll.
-    if (this.list && this.list.contains(event.target) === false) {
+    if (
+      this.list.current &&
+      event.target &&
+      this.list.current.contains(event.target) === false
+    ) {
       this.props.onCloseList();
     }
   };
 
-  listRef: Ref<HTMLDivElement> = node => {
+  listRefCallback: RefCallback<HTMLDivElement> = node => {
     this.props.listRef(node);
+    /*
+    NOTE_TO_SELF(dimitri): this is actually fine but the types are written with readonly for pedantic reasons... might need to @ts-ignore, unfortunately
+    */
     this.list = node;
   };
 
@@ -180,8 +189,8 @@ export class EuiComboBoxOptionsList<T> extends Component<
           </EuiFlexItem>
         </EuiFlexGroup>
       );
-    } else if (searchValue && matchingOptions.length === 0) {
-      if (onCreateOption) {
+    } else if (searchValue && matchingOptions && matchingOptions.length === 0) {
+      if (onCreateOption && getSelectedOptionForSearchValue) {
         const selectedOptionForValue = getSelectedOptionForSearchValue(
           searchValue,
           selectedOptions
@@ -249,8 +258,8 @@ export class EuiComboBoxOptionsList<T> extends Component<
         {emptyStateContent}
       </EuiText>
     ) : (
-        undefined
-      );
+      undefined
+    );
 
     const numVisibleOptions =
       matchingOptions.length < 7 ? matchingOptions.length : 7;
@@ -283,9 +292,10 @@ export class EuiComboBoxOptionsList<T> extends Component<
               style={style}
               key={option.label.toLowerCase()}
               onClick={() => {
-                onOptionClick(option);
+                if (onOptionClick) {
+                  onOptionClick(option);
+                }
               }}
-              // onEnterKey={onOptionEnterKey}
               ref={optionRef.bind(this, index)}
               isFocused={activeOptionIndex === index}
               id={rootId(`_option-${index}`)}
@@ -295,12 +305,12 @@ export class EuiComboBoxOptionsList<T> extends Component<
               {renderOption ? (
                 renderOption(option, searchValue, OPTION_CONTENT_CLASSNAME)
               ) : (
-                  <EuiHighlight
-                    search={searchValue}
-                    className={OPTION_CONTENT_CLASSNAME}>
-                    {label}
-                  </EuiHighlight>
-                )}
+                <EuiHighlight
+                  search={searchValue}
+                  className={OPTION_CONTENT_CLASSNAME}>
+                  {label}
+                </EuiHighlight>
+              )}
             </EuiFilterSelectItem>
           );
         }}
@@ -324,7 +334,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       <EuiPanel
         paddingSize="none"
         className={classes}
-        panelRef={this.listRef}
+        panelRef={this.listRefCallback}
         data-test-subj={`comboBoxOptionsList ${dataTestSubj}`}
         {...rest}>
         <div className="euiComboBoxOptionsList__rowWrap">
diff --git a/src/components/combo_box/combo_box_options_list/index.ts b/src/components/combo_box/combo_box_options_list/index.ts
index d59b19770e0..58d07c814f9 100644
--- a/src/components/combo_box/combo_box_options_list/index.ts
+++ b/src/components/combo_box/combo_box_options_list/index.ts
@@ -1 +1,6 @@
-export { EuiComboBoxOptionsList } from './combo_box_options_list';
+export {
+  EuiComboBoxOptionsList,
+  EuiComboBoxOptionsListProps,
+} from './combo_box_options_list';
+export { EuiComboBoxOption, EuiComboBoxOptionProps } from './combo_box_option';
+export { EuiComboBoxTitle } from './combo_box_title';
diff --git a/src/components/combo_box/index.d.ts b/src/components/combo_box/index.d.ts
deleted file mode 100644
index cd7d9ec3835..00000000000
--- a/src/components/combo_box/index.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export { EuiComboBoxInputProps } from './combo_box_input/combo_box_input';
-export { EuiComboBoxPillProps } from './combo_box_input/combo_box_pill';
-export {
-  EuiComboBoxOptionProps,
-} from './combo_box_options_list/combo_box_option';
-export {
-  EuiComboBoxOptionsListProps,
-} from './combo_box_options_list/combo_box_options_list';
-export { EuiComboBoxProps } from './combo_box';
diff --git a/src/components/combo_box/index.ts b/src/components/combo_box/index.ts
index f94279d721d..4bd236e22f0 100644
--- a/src/components/combo_box/index.ts
+++ b/src/components/combo_box/index.ts
@@ -1,7 +1,9 @@
 import { ButtonHTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 
-export { EuiComboBox } from './combo_box';
+export { EuiComboBox, EuiComboBoxProps } from './combo_box';
+export * from './combo_box_input';
+export * from './combo_box_options_list';
 
 export type EuiComboBoxOptionOption<
   T = string | number | string[] | undefined
@@ -14,3 +16,7 @@ export type EuiComboBoxOptionOption<
   };
 
 export type EuiComboBoxOptionsListPosition = 'top' | 'bottom';
+
+export interface EuiComboBoxSingleSelectionShape {
+  asPlainText?: boolean;
+}

From afc292902b7d92ff84af1efe976d88b5338b3b5e Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Tue, 18 Feb 2020 19:54:26 -0500
Subject: [PATCH 03/13] fixes errors related to singleSelection prop

---
 src/components/combo_box/combo_box.tsx        | 28 ++++++++++++-------
 .../combo_box_input/combo_box_input.tsx       | 16 ++++++-----
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index b79ac732197..0347a128f6d 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -105,7 +105,7 @@ export class EuiComboBox<T> extends Component<
       this.props.selectedOptions,
       initialSearchValue,
       this.props.async,
-      this.props.singleSelection
+      Boolean(this.props.singleSelection)
     ),
     searchValue: initialSearchValue,
     width: 0,
@@ -259,7 +259,7 @@ export class EuiComboBox<T> extends Component<
       this.props.selectedOptions[this.props.selectedOptions.length - 1]
     );
 
-    if (this.props.singleSelection && !this.state.isListOpen) {
+    if (Boolean(this.props.singleSelection) && !this.state.isListOpen) {
       this.openList();
     }
   };
@@ -308,7 +308,7 @@ export class EuiComboBox<T> extends Component<
 
     if (
       this.isSingleSelectionCustomOption() ||
-      (singleSelection && matchingOptions.length < 1)
+      (Boolean(singleSelection) && matchingOptions.length < 1)
     ) {
       // Adding a custom option to a single select that does not appear in the list of options
       this.closeList();
@@ -344,7 +344,7 @@ export class EuiComboBox<T> extends Component<
     } = this.props;
     // The selected option of a single select is custom and does not appear in the list of options
     return (
-      singleSelection &&
+      Boolean(singleSelection) &&
       onCreateOption &&
       selectedOptions.length > 0 &&
       !options.includes(selectedOptions[0])
@@ -473,8 +473,13 @@ export class EuiComboBox<T> extends Component<
       return;
     }
 
-    const { onChange, selectedOptions, singleSelection } = this.props;
-    const changeOptions = Boolean(singleSelection)
+    const {
+      onChange,
+      selectedOptions,
+      singleSelection: singleSelectionProp,
+    } = this.props;
+    const singleSelection = Boolean(singleSelectionProp);
+    const changeOptions = singleSelection
       ? [addedOption]
       : [...selectedOptions, addedOption];
 
@@ -529,7 +534,10 @@ export class EuiComboBox<T> extends Component<
     }
 
     // If the user does this from a state in which an option has focus, then we need to reset it or clear it.
-    if (this.props.singleSelection && this.props.selectedOptions.length === 1) {
+    if (
+      Boolean(this.props.singleSelection) &&
+      this.props.selectedOptions.length === 1
+    ) {
       this.setState({
         activeOptionIndex: this.state.matchingOptions.indexOf(
           this.props.selectedOptions[0]
@@ -623,7 +631,7 @@ export class EuiComboBox<T> extends Component<
       selectedOptions,
       searchValue,
       Boolean(nextProps.async),
-      singleSelection
+      Boolean(singleSelection)
     );
 
     const stateUpdate: Partial<EuiComboBoxState<T>> = { matchingOptions };
@@ -658,7 +666,7 @@ export class EuiComboBox<T> extends Component<
       this.optionsRefs = [];
       let nextActiveOptionIndex = activeOptionIndex;
       // ensure that the currently selected single option is active if it is in the matchingOptions
-      if (singleSelection && selectedOptions.length === 1) {
+      if (Boolean(singleSelection) && selectedOptions.length === 1) {
         if (newMatchingOptions.includes(selectedOptions[0])) {
           nextActiveOptionIndex = newMatchingOptions.indexOf(
             selectedOptions[0]
@@ -692,7 +700,7 @@ export class EuiComboBox<T> extends Component<
         selectedOptions,
         searchValue,
         this.props.async,
-        singleSelection
+        Boolean(singleSelection)
       )
     );
   }
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index e9d79124881..7bf92aa8e87 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -75,7 +75,7 @@ export class EuiComboBoxInput<T> extends Component<
     });
   };
 
-  componentDidUpdate<T>(prevProps: EuiComboBoxInputProps<T>) {
+  componentDidUpdate(prevProps: EuiComboBoxInputProps<T>) {
     const { searchValue } = prevProps;
 
     // We need to update the position of everything if the user enters enough input to change
@@ -107,19 +107,21 @@ export class EuiComboBoxInput<T> extends Component<
       rootId,
       searchValue,
       selectedOptions,
-      singleSelection,
+      singleSelection: singleSelectionProp,
       toggleButtonRef,
       value,
     } = this.props;
 
+    const singleSelection = Boolean(singleSelectionProp);
+    const asPlainText =
+      (singleSelectionProp &&
+        typeof singleSelectionProp === 'object' &&
+        singleSelectionProp.asPlainText) ||
+      false;
+
     const pills = selectedOptions
       ? selectedOptions.map(option => {
           const { label, color, onClick, ...rest } = option;
-
-          const asPlainText =
-            singleSelection &&
-            typeof singleSelection === 'object' &&
-            singleSelection.asPlainText;
           const pillOnClose =
             isDisabled || singleSelection || onClick
               ? undefined

From 7dadea386cb59768ead58ded2ecd64a80cf8753e Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Wed, 19 Feb 2020 18:41:39 -0500
Subject: [PATCH 04/13] types cleanup and abstractions

---
 src/components/combo_box/combo_box.tsx        | 46 ++++++++++---------
 .../combo_box_input/combo_box_input.tsx       | 20 +++++---
 .../combo_box_input/combo_box_pill.tsx        | 22 +++++----
 .../combo_box_option.tsx                      | 10 ++--
 .../combo_box_options_list.tsx                | 30 +++++++-----
 src/components/combo_box/index.ts             |  1 +
 src/components/combo_box/types.ts             | 12 +++++
 7 files changed, 88 insertions(+), 53 deletions(-)
 create mode 100644 src/components/combo_box/types.ts

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 0347a128f6d..d97e71345da 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -8,9 +8,9 @@ import React, {
   Component,
   Ref,
   FocusEventHandler,
-  KeyboardEvent,
   createRef,
   RefObject,
+  KeyboardEventHandler,
 } from 'react';
 import classNames from 'classnames';
 
@@ -38,6 +38,8 @@ import {
   EuiComboBoxOptionsListPosition,
   EuiComboBoxSingleSelectionShape,
 } from './index';
+import { UpdatePositionHandler, OptionHandler } from './types';
+import { RefCallback } from '../common';
 
 type DrillProps<T> = Pick<
   EuiComboBoxOptionsListProps<T>,
@@ -51,7 +53,7 @@ export interface EuiComboBoxProps<T> extends DrillProps<T> {
   compressed: boolean;
   fullWidth: boolean;
   id?: string;
-  inputRef?: RefObject<HTMLInputElement>;
+  inputRef?: RefCallback<HTMLInputElement>;
   isClearable: boolean;
   isDisabled?: boolean;
   isInvalid?: boolean;
@@ -60,7 +62,7 @@ export interface EuiComboBoxProps<T> extends DrillProps<T> {
   onBlur?: FocusEventHandler<HTMLDivElement>;
   onChange?: (options: Array<EuiComboBoxOptionOption<T>>) => void;
   onFocus?: FocusEventHandler<HTMLDivElement>;
-  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
   onSearchChange?: (searchValue: string, hasMatchingOptions?: boolean) => void;
   placeholder?: string;
   rowHeight?: number;
@@ -116,7 +118,7 @@ export class EuiComboBox<T> extends Component<
 
   // Refs
   comboBoxRef = createRef<HTMLDivElement>();
-  autoSizeInput = createRef<HTMLInputElement>();
+  autoSizeInputRef = createRef<HTMLInputElement>();
   searchInputRef = createRef<HTMLInputElement>();
   listRef = createRef<HTMLInputElement>();
   toggleButtonRef = createRef<HTMLButtonElement | HTMLSpanElement>();
@@ -135,8 +137,8 @@ export class EuiComboBox<T> extends Component<
     });
   };
 
-  updateListPosition = (
-    listElement: RefObject<HTMLDivElement> | undefined = this.state.listElement
+  updatePosition: UpdatePositionHandler = (
+    listElement = this.state.listElement
   ) => {
     if (!this._isMounted) {
       return;
@@ -370,7 +372,7 @@ export class EuiComboBox<T> extends Component<
      */
     const relatedTarget = (event.relatedTarget ||
       // @ts-ignore need to add window global override
-      event.explicitOriginalTarget) as (EventTarget | null);
+      event.explicitOriginalTarget) as (Node | null);
 
     const focusedInOptionsList =
       relatedTarget &&
@@ -398,7 +400,7 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
-  onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+  onKeyDown: KeyboardEventHandler<HTMLDivElement> = event => {
     switch (event.keyCode) {
       case comboBoxKeyCodes.UP:
         event.preventDefault();
@@ -457,11 +459,11 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
-  onOptionEnterKey = (option: EuiComboBoxOptionOption<T>) => {
+  onOptionEnterKey: OptionHandler<T> = option => {
     this.onAddOption(option);
   };
 
-  onOptionClick = (option: EuiComboBoxOptionOption<T>) => {
+  onOptionClick: OptionHandler<T> = option => {
     this.onAddOption(option);
   };
 
@@ -501,7 +503,7 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
-  onRemoveOption = (removedOption: EuiComboBoxOptionOption<T>) => {
+  onRemoveOption: OptionHandler<T> = removedOption => {
     const { onChange, selectedOptions } = this.props;
     if (onChange) {
       onChange(selectedOptions.filter(option => option !== removedOption));
@@ -585,6 +587,10 @@ export class EuiComboBox<T> extends Component<
       );
     }
 
+    /*
+    NOTE_TO_SELF(dimitri): this is actually fine but the types are written with readonly for pedantic reasons... might need to @ts-ignore, unfortunately
+    */
+    // @ts-ignore STILL_INVESTIGATING(dimitri)
     this.comboBoxRef.current = node;
 
     if (this.comboBoxRef.current) {
@@ -599,7 +605,7 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
-  optionRef = (index: number, node: RefObject<HTMLDivElement>) => {
+  optionRef: EuiComboBoxOptionsListProps<T>['optionRef'] = (index, node) => {
     this.optionsRefs[index] = node;
   };
 
@@ -608,11 +614,9 @@ export class EuiComboBox<T> extends Component<
 
     // TODO: This will need to be called once the actual stylesheet loads.
     setTimeout(() => {
-      if (this.autoSizeInput.current) {
-        /*
-        NOTE_TO_SELF(dimitri): this either needs an issue (I couldn't find one) or needs to be removed.
-        */
-        this.autoSizeInputcopyInputStyles() = null;
+      if (this.autoSizeInputRef.current) {
+        // @ts-ignore https://github.com/DefinitelyTyped/DefinitelyTyped/pull/42467
+        this.autoSizeInputRef.current.copyInputStyles();
       }
     }, 100);
   }
@@ -630,7 +634,7 @@ export class EuiComboBox<T> extends Component<
       options,
       selectedOptions,
       searchValue,
-      Boolean(nextProps.async),
+      nextProps.async,
       Boolean(singleSelection)
     );
 
@@ -798,7 +802,7 @@ export class EuiComboBox<T> extends Component<
             scrollToIndex={activeOptionIndex}
             searchValue={searchValue}
             selectedOptions={selectedOptions}
-            updatePosition={this.updateListPosition}
+            updatePosition={this.updatePosition}
             width={width}
           />
         </EuiPortal>
@@ -827,7 +831,7 @@ export class EuiComboBox<T> extends Component<
         ref={this.ownRef}
         role="combobox">
         <EuiComboBoxInput
-          autoSizeInputRef={this.autoSizeInput}
+          autoSizeInputRef={this.autoSizeInputRef}
           compressed={compressed}
           focusedOptionId={
             this.hasActiveOption()
@@ -856,7 +860,7 @@ export class EuiComboBox<T> extends Component<
           selectedOptions={selectedOptions}
           singleSelection={singleSelection}
           toggleButtonRef={this.toggleButtonRef}
-          updatePosition={this.updateListPosition}
+          updatePosition={this.updatePosition}
           value={value}
         />
 
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index 7bf92aa8e87..99827f5ef8e 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -8,6 +8,7 @@ import { EuiComboBoxPill } from './combo_box_pill';
 import { htmlIdGenerator } from '../../../services';
 import { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape } from '..';
 import { EuiFormControlLayoutIconsProps } from '../../form/form_control_layout/form_control_layout_icons';
+import { UpdatePositionHandler, OptionHandler, RefCallback } from '../types';
 
 const makeId = htmlIdGenerator();
 
@@ -18,7 +19,7 @@ export interface EuiComboBoxInputProps<T> {
   fullWidth?: boolean;
   hasSelectedOptions: boolean;
   id?: string;
-  inputRef?: RefObject<HTMLInputElement>;
+  inputRef?: RefCallback<HTMLInputElement>;
   isDisabled?: boolean;
   isListOpen: boolean;
   noIcon: boolean;
@@ -29,14 +30,14 @@ export interface EuiComboBoxInputProps<T> {
   onCloseListClick: () => void;
   onFocus: FocusEventHandler<HTMLInputElement>;
   onOpenListClick: () => void;
-  onRemoveOption?: (option: EuiComboBoxOptionOption<T>) => void;
+  onRemoveOption?: OptionHandler<T>;
   placeholder?: string;
   rootId: ReturnType<typeof htmlIdGenerator>;
   searchValue: string;
   selectedOptions?: Array<EuiComboBoxOptionOption<T>>;
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
   toggleButtonRef?: RefObject<HTMLButtonElement | HTMLSpanElement>;
-  updatePosition: (listElement?: RefObject<HTMLDivElement> | undefined) => void;
+  updatePosition: UpdatePositionHandler;
   value?: string;
 }
 
@@ -126,15 +127,13 @@ export class EuiComboBoxInput<T> extends Component<
             isDisabled || singleSelection || onClick
               ? undefined
               : onRemoveOption;
-          const pillOnClick = onClick || (() => {});
-
           return (
             <EuiComboBoxPill
               option={option}
               onClose={pillOnClose}
               key={label.toLowerCase()}
               color={color}
-              onClick={pillOnClick}
+              onClick={onClick}
               onClickAriaLabel={onClick ? 'Change' : undefined}
               asPlainText={asPlainText}
               {...rest}>
@@ -208,6 +207,7 @@ export class EuiComboBoxInput<T> extends Component<
 
       As I understand it, a `RefObject`, which is what `toggleButtonRef` is, should be accepted, as it is with the `ref` property itself.
       */
+      // @ts-ignore STILL_INVESTIGATING(dimitri)
       icon = {
         'aria-label': isListOpen
           ? 'Close list of options'
@@ -257,7 +257,13 @@ export class EuiComboBoxInput<T> extends Component<
               }
             }}
             onFocus={this.onFocus}
-            ref={autoSizeInputRef}
+            ref={
+              /*
+              NOTE_TO_SELF(dimitri): If anyone has a better solution to this problem, I'm all ears :)
+              */
+              autoSizeInputRef as (RefObject<AutosizeInput> &
+                RefObject<HTMLInputElement>)
+            }
             role="textbox"
             style={{ fontSize: 14 }}
             value={searchValue}
diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.tsx b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
index 1564d45948e..1aa59ca351a 100644
--- a/src/components/combo_box/combo_box_input/combo_box_pill.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
@@ -1,18 +1,19 @@
-import React, { AriaAttributes, Component } from 'react';
+import React, { AriaAttributes, Component, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { EuiBadge } from '../../badge';
 import { EuiI18n } from '../../i18n';
 import { EuiComboBoxOptionOption } from '..';
+import { OptionHandler } from '../types';
 
-export interface EuiComboBoxPillProps<T> {
+interface EuiComboBoxPillProps<T> {
   asPlainText?: boolean;
   children?: string;
   className?: string;
   color?: string;
-  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
   onClickAriaLabel?: AriaAttributes['aria-label'];
-  onClose?: (option: EuiComboBoxOptionOption<T>) => void;
+  onClose?: OptionHandler<T>;
   option: EuiComboBoxOptionOption<T>;
 }
 
@@ -47,6 +48,13 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
       },
       className
     );
+    const onClickProps =
+      onClick && onClickAriaLabel
+        ? {
+            onClick,
+            onClickAriaLabel,
+          }
+        : {};
 
     if (onClose) {
       return (
@@ -63,9 +71,8 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
               iconOnClickAriaLabel={removeSelection}
               iconSide="right"
               iconType="cross"
-              onClick={onClick}
-              onClickAriaLabel={onClickAriaLabel}
               title={children}
+              {...onClickProps}
               {...rest}>
               {children}
             </EuiBadge>
@@ -88,8 +95,7 @@ export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
         color={color}
         title={children}
         {...rest}
-        onClick={onClick}
-        onClickAriaLabel={onClickAriaLabel}>
+        {...onClickProps}>
         {children}
       </EuiBadge>
     );
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.tsx b/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
index 30e5081e9ed..5246735317d 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
@@ -1,17 +1,17 @@
-import React, { Component, KeyboardEvent, ReactNode } from 'react';
+import React, { Component, ReactNode, KeyboardEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { ENTER, SPACE } from '../../../services/key_codes';
-import { RefCallback } from '../../common';
 import { EuiComboBoxOptionOption } from '../index';
+import { OptionHandler, RefCallback } from '../types';
 
 export interface EuiComboBoxOptionProps<T> {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
   isFocused: boolean;
-  onClick: (option: EuiComboBoxOptionOption<T>) => void;
-  onEnterKey: (option: EuiComboBoxOptionOption<T>) => void;
+  onClick: OptionHandler<T>;
+  onEnterKey: OptionHandler<T>;
   option: EuiComboBoxOptionOption<T>;
   optionRef?: RefCallback<HTMLButtonElement>;
 }
@@ -27,7 +27,7 @@ export class EuiComboBoxOption<T> extends Component<EuiComboBoxOptionProps<T>> {
     onClick(option);
   };
 
-  onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+  onKeyDown: KeyboardEventHandler<HTMLButtonElement> = event => {
     if (event.keyCode === ENTER || event.keyCode === SPACE) {
       event.preventDefault();
       event.stopPropagation();
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index deba7e60c84..e37934649dc 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -1,9 +1,10 @@
 import React, { Component, ReactNode, RefObject, createRef } from 'react';
 import classNames from 'classnames';
-import { List, ListProps } from 'react-virtualized';
+import { List, ListProps } from 'react-virtualized'; // eslint-disable-line import/named
 
 // https://github.com/elastic/eui/pull/2835
-import { EuiCode } from '@elastic/eui'; // eslint-disable-line import/no-unresolved
+// @ts-ignore STILL_INVESTIGATING(dimitri)
+import { EuiCode } from '../../../components/code'; // eslint-disable-line import/no-unresolved
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiHighlight } from '../../highlight';
 import { EuiPanel } from '../../panel';
@@ -12,11 +13,9 @@ import { EuiLoadingSpinner } from '../../loading';
 import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
-import { EuiComboBoxOptionProps } from './combo_box_option';
 import { EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition } from '..';
 import { htmlIdGenerator } from '../../../services';
-import { RefCallback } from '../../common';
-import { EuiComboBoxInputProps } from '../combo_box_input';
+import { UpdatePositionHandler, OptionHandler, RefCallback } from '../types';
 
 const positionToClassNameMap: {
   [position in EuiComboBoxOptionsListPosition]: string
@@ -39,16 +38,15 @@ export interface EuiComboBoxOptionsListProps<T> {
   isLoading?: boolean;
   listRef: RefObject<HTMLInputElement>;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
-
-  onCloseList: EuiComboBoxInputProps<T>['onCloseListClick'];
+  onCloseList: () => void;
   onCreateOption?: (
     searchValue: string,
     options: Array<EuiComboBoxOptionOption<T>>
   ) => boolean;
-  onOptionClick?: (option: EuiComboBoxOptionOption<T>) => void;
-  onOptionEnterKey?: EuiComboBoxOptionProps<T>['onClick'];
+  onOptionClick?: OptionHandler<T>;
+  onOptionEnterKey?: OptionHandler<T>;
   onScroll?: ListProps['onScroll'];
-  optionRef?: (index: number, node: RefObject<HTMLDivElement>) => void;
+  optionRef: (index: number, node: RefObject<EuiFilterSelectItem>) => void;
   options: Array<EuiComboBoxOptionOption<T>>;
   position?: EuiComboBoxOptionsListPosition;
   renderOption?: (
@@ -61,7 +59,7 @@ export interface EuiComboBoxOptionsListProps<T> {
   scrollToIndex?: number;
   searchValue: string;
   selectedOptions: Array<EuiComboBoxOptionOption<T>>;
-  updatePosition: (listElement?: RefObject<HTMLDivElement> | undefined) => void;
+  updatePosition: UpdatePositionHandler;
   width: number;
 }
 
@@ -130,6 +128,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
     if (
       this.list.current &&
       event.target &&
+      // @ts-ignore STILL_INVESTIGATING(dimitri)
       this.list.current.contains(event.target) === false
     ) {
       this.props.onCloseList();
@@ -137,10 +136,12 @@ export class EuiComboBoxOptionsList<T> extends Component<
   };
 
   listRefCallback: RefCallback<HTMLDivElement> = node => {
+    // @ts-ignore STILL_INVESTIGATING(dimitri)
     this.props.listRef(node);
     /*
     NOTE_TO_SELF(dimitri): this is actually fine but the types are written with readonly for pedantic reasons... might need to @ts-ignore, unfortunately
     */
+    // @ts-ignore STILL_INVESTIGATING(dimitri)
     this.list = node;
   };
 
@@ -296,7 +297,12 @@ export class EuiComboBoxOptionsList<T> extends Component<
                   onOptionClick(option);
                 }
               }}
-              ref={optionRef.bind(this, index)}
+              ref={ref => {
+                if (ref !== null) {
+                  // @ts-ignore STILL_INVESTIGATING(dimitri): what is this even doing?
+                  optionRef(index, ref);
+                }
+              }}
               isFocused={activeOptionIndex === index}
               id={rootId(`_option-${index}`)}
               title={label}
diff --git a/src/components/combo_box/index.ts b/src/components/combo_box/index.ts
index 4bd236e22f0..f3a835dac35 100644
--- a/src/components/combo_box/index.ts
+++ b/src/components/combo_box/index.ts
@@ -5,6 +5,7 @@ export { EuiComboBox, EuiComboBoxProps } from './combo_box';
 export * from './combo_box_input';
 export * from './combo_box_options_list';
 
+// note similarity to `Option` in `components/selectable/types.tsx`
 export type EuiComboBoxOptionOption<
   T = string | number | string[] | undefined
 > = CommonProps &
diff --git a/src/components/combo_box/types.ts b/src/components/combo_box/types.ts
new file mode 100644
index 00000000000..d4bc8f77031
--- /dev/null
+++ b/src/components/combo_box/types.ts
@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import { EuiComboBoxOptionOption } from '.';
+
+export type UpdatePositionHandler = (
+  listElement?: RefObject<HTMLDivElement>
+) => void;
+export type OptionHandler<T> = (option: EuiComboBoxOptionOption<T>) => void;
+
+// See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/42482/files
+export type RefCallback<T> = {
+  bivarianceHack(instance: T | null): void;
+}['bivarianceHack'];

From 52d7253dfa052cb1b10b7e60a2c3584955014ab6 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Thu, 20 Feb 2020 11:06:17 -0500
Subject: [PATCH 05/13] reverts all attempts to use createRef and RefObject

---
 src/components/combo_box/combo_box.tsx        | 120 ++++++++++--------
 .../combo_box_input/combo_box_input.tsx       |  28 ++--
 .../combo_box_options_list.tsx                |  40 +++---
 src/components/combo_box/types.ts             |   5 +-
 4 files changed, 92 insertions(+), 101 deletions(-)

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index d97e71345da..e90e320eef2 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -6,10 +6,8 @@
 
 import React, {
   Component,
-  Ref,
   FocusEventHandler,
   createRef,
-  RefObject,
   KeyboardEventHandler,
 } from 'react';
 import classNames from 'classnames';
@@ -38,8 +36,14 @@ import {
   EuiComboBoxOptionsListPosition,
   EuiComboBoxSingleSelectionShape,
 } from './index';
-import { UpdatePositionHandler, OptionHandler } from './types';
-import { RefCallback } from '../common';
+import {
+  UpdatePositionHandler,
+  OptionHandler,
+  RefCallback,
+  RefInstance,
+} from './types';
+import { EuiFilterSelectItem } from '../filter_group';
+import AutosizeInput from 'react-input-autosize';
 
 type DrillProps<T> = Pick<
   EuiComboBoxOptionsListProps<T>,
@@ -73,7 +77,7 @@ interface EuiComboBoxState<T> {
   activeOptionIndex: number;
   hasFocus: boolean;
   isListOpen: boolean;
-  listElement?: RefObject<HTMLDivElement>;
+  listElement?: RefInstance<HTMLDivElement>;
   listPosition: EuiComboBoxOptionsListPosition;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   searchValue: string;
@@ -100,7 +104,7 @@ export class EuiComboBox<T> extends Component<
     activeOptionIndex: -1,
     hasFocus: false,
     isListOpen: false,
-    listElement: undefined,
+    listElement: null,
     listPosition: 'bottom',
     matchingOptions: getMatchingOptions<T>(
       this.props.options,
@@ -117,12 +121,14 @@ export class EuiComboBox<T> extends Component<
   rootId = htmlIdGenerator();
 
   // Refs
-  comboBoxRef = createRef<HTMLDivElement>();
-  autoSizeInputRef = createRef<HTMLInputElement>();
-  searchInputRef = createRef<HTMLInputElement>();
-  listRef = createRef<HTMLInputElement>();
-  toggleButtonRef = createRef<HTMLButtonElement | HTMLSpanElement>();
-  optionsRefs = [createRef<HTMLDivElement>()];
+  comboBoxRefInstance: RefInstance<HTMLDivElement> = null;
+  autoSizeInputRefInstance: RefInstance<AutosizeInput & HTMLDivElement> = null;
+  searchInputRefInstance: RefInstance<HTMLInputElement> = null;
+  listRefInstance: RefInstance<HTMLDivElement> = null;
+  toggleButtonRefInstance: RefInstance<
+    HTMLButtonElement | HTMLSpanElement
+  > = null;
+  optionsRefInstances: Array<RefInstance<EuiFilterSelectItem>> = [];
 
   openList = () => {
     this.setState({
@@ -148,37 +154,37 @@ export class EuiComboBox<T> extends Component<
       return;
     }
 
-    if (!listElement || !listElement.current) {
+    if (!listElement || !listElement) {
       return;
     }
 
     // it's possible that updateListPosition is called when listElement is becoming visible, but isn't yet
-    const listElementBounds = listElement.current.getBoundingClientRect();
+    const listElementBounds = listElement.getBoundingClientRect();
     if (listElementBounds.width === 0 || listElementBounds.height === 0) {
       return;
     }
 
-    if (!this.comboBoxRef.current) {
+    if (!this.comboBoxRefInstance) {
       return;
     }
 
-    const comboBoxBounds = this.comboBoxRef.current.getBoundingClientRect();
+    const comboBoxBounds = this.comboBoxRefInstance.getBoundingClientRect();
 
     const { position, top } = findPopoverPosition({
       allowCrossAxis: false,
-      anchor: this.comboBoxRef.current,
-      popover: listElement.current,
+      anchor: this.comboBoxRefInstance,
+      popover: listElement,
       position: 'bottom',
     }) as { position: 'bottom'; top: number };
 
-    if (this.listRef.current) {
-      this.listRef.current.style.top = `${top}px`;
+    if (this.listRefInstance) {
+      this.listRefInstance.style.top = `${top}px`;
       // listElement doesn't have its width set until after updating the position
       // which means the popover service won't know about the correct width
       // however, we already know where to position the element
-      this.listRef.current.style.left = `${comboBoxBounds.left +
+      this.listRefInstance.style.left = `${comboBoxBounds.left +
         window.pageXOffset}px`;
-      this.listRef.current.style.width = `${comboBoxBounds.width}px`;
+      this.listRefInstance.style.width = `${comboBoxBounds.width}px`;
     }
 
     // Cache for future calls.
@@ -376,12 +382,12 @@ export class EuiComboBox<T> extends Component<
 
     const focusedInOptionsList =
       relatedTarget &&
-      this.listRef.current &&
-      this.listRef.current.contains(relatedTarget);
+      this.listRefInstance &&
+      this.listRefInstance.contains(relatedTarget);
     const focusedInInput =
       relatedTarget &&
-      this.comboBoxRef.current &&
-      this.comboBoxRef.current.contains(relatedTarget);
+      this.comboBoxRefInstance &&
+      this.comboBoxRefInstance.contains(relatedTarget);
     if (!focusedInOptionsList && !focusedInInput) {
       this.closeList();
 
@@ -493,8 +499,8 @@ export class EuiComboBox<T> extends Component<
     this.clearActiveOption();
 
     if (!isContainerBlur) {
-      if (this.searchInputRef.current) {
-        this.searchInputRef.current.focus();
+      if (this.searchInputRefInstance) {
+        this.searchInputRefInstance.focus();
       }
     }
 
@@ -520,8 +526,8 @@ export class EuiComboBox<T> extends Component<
 
     // Clicking the clear button will also cause it to disappear. This would result in focus
     // shifting unexpectedly to the body element so we set it to the input which is more reasonable,
-    if (this.searchInputRef.current) {
-      this.searchInputRef.current.focus();
+    if (this.searchInputRefInstance) {
+      this.searchInputRefInstance.focus();
     }
 
     if (!this.state.isListOpen) {
@@ -531,8 +537,8 @@ export class EuiComboBox<T> extends Component<
 
   onComboBoxClick = () => {
     // When the user clicks anywhere on the box, enter the interaction state.
-    if (this.searchInputRef.current) {
-      this.searchInputRef.current.focus();
+    if (this.searchInputRefInstance) {
+      this.searchInputRefInstance.focus();
     }
 
     // If the user does this from a state in which an option has focus, then we need to reset it or clear it.
@@ -551,8 +557,8 @@ export class EuiComboBox<T> extends Component<
   };
 
   onOpenListClick = () => {
-    if (this.searchInputRef.current) {
-      this.searchInputRef.current.focus();
+    if (this.searchInputRefInstance) {
+      this.searchInputRefInstance.focus();
     }
     if (!this.state.isListOpen) {
       this.openList();
@@ -577,28 +583,24 @@ export class EuiComboBox<T> extends Component<
     });
   };
 
-  ownRef: Ref<HTMLDivElement> = node => {
+  ownRef: RefCallback<HTMLDivElement> = node => {
     // IE11 doesn't support the `relatedTarget` event property for blur events
     // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-    if (this.comboBoxRef.current) {
-      this.comboBoxRef.current.removeEventListener(
+    if (this.comboBoxRefInstance) {
+      this.comboBoxRefInstance.removeEventListener(
         'focusout',
         this.onContainerBlur
       );
     }
 
-    /*
-    NOTE_TO_SELF(dimitri): this is actually fine but the types are written with readonly for pedantic reasons... might need to @ts-ignore, unfortunately
-    */
-    // @ts-ignore STILL_INVESTIGATING(dimitri)
-    this.comboBoxRef.current = node;
+    this.comboBoxRefInstance = node;
 
-    if (this.comboBoxRef.current) {
-      this.comboBoxRef.current.addEventListener(
+    if (this.comboBoxRefInstance) {
+      this.comboBoxRefInstance.addEventListener(
         'focusout',
         this.onContainerBlur
       );
-      const comboBoxBounds = this.comboBoxRef.current.getBoundingClientRect();
+      const comboBoxBounds = this.comboBoxRefInstance.getBoundingClientRect();
       this.setState({
         width: comboBoxBounds.width,
       });
@@ -606,7 +608,7 @@ export class EuiComboBox<T> extends Component<
   };
 
   optionRef: EuiComboBoxOptionsListProps<T>['optionRef'] = (index, node) => {
-    this.optionsRefs[index] = node;
+    this.optionsRefInstances[index] = node;
   };
 
   componentDidMount() {
@@ -614,9 +616,9 @@ export class EuiComboBox<T> extends Component<
 
     // TODO: This will need to be called once the actual stylesheet loads.
     setTimeout(() => {
-      if (this.autoSizeInputRef.current) {
+      if (this.autoSizeInputRefInstance) {
         // @ts-ignore https://github.com/DefinitelyTyped/DefinitelyTyped/pull/42467
-        this.autoSizeInputRef.current.copyInputStyles();
+        this.autoSizeInputRefInstance.copyInputStyles();
       }
     }, 100);
   }
@@ -667,7 +669,7 @@ export class EuiComboBox<T> extends Component<
     }
 
     if (areOptionsDifferent) {
-      this.optionsRefs = [];
+      this.optionsRefInstances = [];
       let nextActiveOptionIndex = activeOptionIndex;
       // ensure that the currently selected single option is active if it is in the matchingOptions
       if (Boolean(singleSelection) && selectedOptions.length === 1) {
@@ -782,15 +784,17 @@ export class EuiComboBox<T> extends Component<
             data-test-subj={optionsListDataTestSubj}
             fullWidth={fullWidth}
             isLoading={isLoading}
-            listRef={this.listRef}
+            listRef={ref => {
+              this.listRefInstance = ref;
+            }}
             matchingOptions={this.state.matchingOptions}
             onCloseList={this.closeList}
             onCreateOption={onCreateOption}
             onOptionClick={this.onOptionClick}
             onOptionEnterKey={this.onOptionEnterKey}
             onScroll={() => {
-              if (this.searchInputRef.current) {
-                this.searchInputRef.current.focus();
+              if (this.searchInputRefInstance) {
+                this.searchInputRefInstance.focus();
               }
             }}
             optionRef={this.optionRef}
@@ -831,7 +835,9 @@ export class EuiComboBox<T> extends Component<
         ref={this.ownRef}
         role="combobox">
         <EuiComboBoxInput
-          autoSizeInputRef={this.autoSizeInputRef}
+          autoSizeInputRef={ref => {
+            this.autoSizeInputRefInstance = ref;
+          }}
           compressed={compressed}
           focusedOptionId={
             this.hasActiveOption()
@@ -841,7 +847,9 @@ export class EuiComboBox<T> extends Component<
           fullWidth={fullWidth}
           hasSelectedOptions={selectedOptions.length > 0}
           id={id}
-          inputRef={inputRef}
+          inputRef={ref => {
+            this.searchInputRefInstance = ref;
+          }}
           isDisabled={isDisabled}
           isListOpen={isListOpen}
           noIcon={!!noSuggestions}
@@ -859,7 +867,9 @@ export class EuiComboBox<T> extends Component<
           searchValue={searchValue}
           selectedOptions={selectedOptions}
           singleSelection={singleSelection}
-          toggleButtonRef={this.toggleButtonRef}
+          toggleButtonRef={ref => {
+            this.toggleButtonRefInstance = ref;
+          }}
           updatePosition={this.updatePosition}
           value={value}
         />
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index 99827f5ef8e..b6300ddc985 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -1,4 +1,4 @@
-import React, { Component, FocusEventHandler, RefObject } from 'react';
+import React, { Component, FocusEventHandler } from 'react';
 import classNames from 'classnames';
 import AutosizeInput from 'react-input-autosize';
 
@@ -13,7 +13,7 @@ import { UpdatePositionHandler, OptionHandler, RefCallback } from '../types';
 const makeId = htmlIdGenerator();
 
 export interface EuiComboBoxInputProps<T> {
-  autoSizeInputRef?: RefObject<HTMLInputElement>;
+  autoSizeInputRef?: RefCallback<AutosizeInput & HTMLInputElement>;
   compressed: boolean;
   focusedOptionId?: string;
   fullWidth?: boolean;
@@ -36,7 +36,7 @@ export interface EuiComboBoxInputProps<T> {
   searchValue: string;
   selectedOptions?: Array<EuiComboBoxOptionOption<T>>;
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
-  toggleButtonRef?: RefObject<HTMLButtonElement | HTMLSpanElement>;
+  toggleButtonRef?: RefCallback<HTMLButtonElement | HTMLSpanElement>;
   updatePosition: UpdatePositionHandler;
   value?: string;
 }
@@ -198,16 +198,6 @@ export class EuiComboBoxInput<T> extends Component<
 
     let icon: EuiFormControlLayoutIconsProps['icon'];
     if (!noIcon) {
-      /*
-      NOTE_TO_SELF(dimitri): this problem appears to come from an issue with the type of
-      EuiFormControlLayoutCustomIconProps['iconRef']:
-      ```tsx
-      | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
-      ```
-
-      As I understand it, a `RefObject`, which is what `toggleButtonRef` is, should be accepted, as it is with the `ref` property itself.
-      */
-      // @ts-ignore STILL_INVESTIGATING(dimitri)
       icon = {
         'aria-label': isListOpen
           ? 'Close list of options'
@@ -257,13 +247,11 @@ export class EuiComboBoxInput<T> extends Component<
               }
             }}
             onFocus={this.onFocus}
-            ref={
-              /*
-              NOTE_TO_SELF(dimitri): If anyone has a better solution to this problem, I'm all ears :)
-              */
-              autoSizeInputRef as (RefObject<AutosizeInput> &
-                RefObject<HTMLInputElement>)
-            }
+            ref={(ref: HTMLInputElement & AutosizeInput) => {
+              if (autoSizeInputRef) {
+                autoSizeInputRef(ref);
+              }
+            }}
             role="textbox"
             style={{ fontSize: 14 }}
             value={searchValue}
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index e37934649dc..ab5952804cf 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -1,10 +1,8 @@
-import React, { Component, ReactNode, RefObject, createRef } from 'react';
+import React, { Component, ReactNode } from 'react';
 import classNames from 'classnames';
 import { List, ListProps } from 'react-virtualized'; // eslint-disable-line import/named
 
-// https://github.com/elastic/eui/pull/2835
-// @ts-ignore STILL_INVESTIGATING(dimitri)
-import { EuiCode } from '../../../components/code'; // eslint-disable-line import/no-unresolved
+import { EuiCode } from '../../../components/code';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiHighlight } from '../../highlight';
 import { EuiPanel } from '../../panel';
@@ -15,7 +13,12 @@ import { EuiI18n } from '../../i18n';
 import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
 import { EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition } from '..';
 import { htmlIdGenerator } from '../../../services';
-import { UpdatePositionHandler, OptionHandler, RefCallback } from '../types';
+import {
+  UpdatePositionHandler,
+  OptionHandler,
+  RefCallback,
+  RefInstance,
+} from '../types';
 
 const positionToClassNameMap: {
   [position in EuiComboBoxOptionsListPosition]: string
@@ -36,7 +39,7 @@ export interface EuiComboBoxOptionsListProps<T> {
     selectedOptions: any[]
   ) => EuiComboBoxOptionOption<T>;
   isLoading?: boolean;
-  listRef: RefObject<HTMLInputElement>;
+  listRef: RefCallback<HTMLDivElement>;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   onCloseList: () => void;
   onCreateOption?: (
@@ -46,7 +49,7 @@ export interface EuiComboBoxOptionsListProps<T> {
   onOptionClick?: OptionHandler<T>;
   onOptionEnterKey?: OptionHandler<T>;
   onScroll?: ListProps['onScroll'];
-  optionRef: (index: number, node: RefObject<EuiFilterSelectItem>) => void;
+  optionRef: (index: number, node: RefInstance<EuiFilterSelectItem>) => void;
   options: Array<EuiComboBoxOptionOption<T>>;
   position?: EuiComboBoxOptionsListPosition;
   renderOption?: (
@@ -66,7 +69,7 @@ export interface EuiComboBoxOptionsListProps<T> {
 export class EuiComboBoxOptionsList<T> extends Component<
   EuiComboBoxOptionsListProps<T>
 > {
-  list = createRef<HTMLDivElement>();
+  listRefInstance: RefInstance<HTMLDivElement> = null;
 
   static defaultProps = {
     'data-test-subj': '',
@@ -76,9 +79,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
   updatePosition = () => {
     // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
     requestAnimationFrame(() => {
-      if (this.list.current) {
-        this.props.updatePosition(this.list);
-      }
+      this.props.updatePosition(this.listRefInstance);
     });
   };
 
@@ -126,23 +127,17 @@ export class EuiComboBoxOptionsList<T> extends Component<
     // Close the list when a scroll event happens, but not if the scroll happened in the options list.
     // This mirrors Firefox's approach of auto-closing `select` elements onscroll.
     if (
-      this.list.current &&
+      this.listRefInstance &&
       event.target &&
-      // @ts-ignore STILL_INVESTIGATING(dimitri)
-      this.list.current.contains(event.target) === false
+      this.listRefInstance.contains(event.target as Node) === false
     ) {
       this.props.onCloseList();
     }
   };
 
   listRefCallback: RefCallback<HTMLDivElement> = node => {
-    // @ts-ignore STILL_INVESTIGATING(dimitri)
     this.props.listRef(node);
-    /*
-    NOTE_TO_SELF(dimitri): this is actually fine but the types are written with readonly for pedantic reasons... might need to @ts-ignore, unfortunately
-    */
-    // @ts-ignore STILL_INVESTIGATING(dimitri)
-    this.list = node;
+    this.listRefInstance = node;
   };
 
   render() {
@@ -298,10 +293,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
                 }
               }}
               ref={ref => {
-                if (ref !== null) {
-                  // @ts-ignore STILL_INVESTIGATING(dimitri): what is this even doing?
-                  optionRef(index, ref);
-                }
+                optionRef(index, ref);
               }}
               isFocused={activeOptionIndex === index}
               id={rootId(`_option-${index}`)}
diff --git a/src/components/combo_box/types.ts b/src/components/combo_box/types.ts
index d4bc8f77031..6e2245a3010 100644
--- a/src/components/combo_box/types.ts
+++ b/src/components/combo_box/types.ts
@@ -1,8 +1,7 @@
-import { RefObject } from 'react';
 import { EuiComboBoxOptionOption } from '.';
 
 export type UpdatePositionHandler = (
-  listElement?: RefObject<HTMLDivElement>
+  listElement?: RefInstance<HTMLDivElement>
 ) => void;
 export type OptionHandler<T> = (option: EuiComboBoxOptionOption<T>) => void;
 
@@ -10,3 +9,5 @@ export type OptionHandler<T> = (option: EuiComboBoxOptionOption<T>) => void;
 export type RefCallback<T> = {
   bivarianceHack(instance: T | null): void;
 }['bivarianceHack'];
+
+export type RefInstance<T> = T | null;

From f4684bee20e4e9d14302f9c2754f0b4cdafd3963 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Thu, 20 Feb 2020 11:18:50 -0500
Subject: [PATCH 06/13] runs tests, updates snapshots

---
 .../__snapshots__/combo_box.test.tsx.snap     | 518 ++++++++++++++++++
 src/components/combo_box/combo_box.tsx        |   4 +-
 .../combo_box_input/combo_box_pill.tsx        |   2 +-
 src/components/index.d.ts                     |   1 -
 4 files changed, 521 insertions(+), 4 deletions(-)
 create mode 100644 src/components/combo_box/__snapshots__/combo_box.test.tsx.snap

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
new file mode 100644
index 00000000000..e05eaa15dd3
--- /dev/null
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -0,0 +1,518 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <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-controls=""
+            data-test-subj="comboBoxSearchInput"
+            role="textbox"
+            style="box-sizing:content-box;width:1px"
+            value=""
+          />
+          <div
+            style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre"
+          />
+        </div>
+      </div>
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <button
+          aria-label="Open list of options"
+          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+          data-test-subj="comboBoxToggleListButton"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`props full width is rendered 1`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  className="euiComboBox euiComboBox--fullWidth"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    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 [
+        Object {
+          "label": "Mimas",
+        },
+      ]
+    }
+    singleSelection={false}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas"
+  />
+</div>
+`;
+
+exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  className="euiComboBox"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    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}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value=""
+  />
+</div>
+`;
+
+exports[`props isClearable=false disallows user from clearing input when options are selected 1`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  className="euiComboBox"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    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 [
+        Object {
+          "label": "Mimas",
+        },
+        Object {
+          "label": "Iapetus",
+        },
+      ]
+    }
+    singleSelection={false}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas, Iapetus"
+  />
+</div>
+`;
+
+exports[`props isDisabled is rendered 1`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  className="euiComboBox euiComboBox-isDisabled"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    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 [
+        Object {
+          "label": "Mimas",
+        },
+      ]
+    }
+    singleSelection={false}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas"
+  />
+</div>
+`;
+
+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"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <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-controls="htmlid_listbox"
+            data-test-subj="comboBoxSearchInput"
+            role="textbox"
+            style="box-sizing: content-box; width: 2px;"
+            value=""
+          />
+          <div
+            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+          />
+        </div>
+      </div>
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <button
+          aria-label="Close list of options"
+          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+          data-test-subj="comboBoxToggleListButton"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiPanel euiComboBoxOptionsList euiComboBoxOptionsList--bottom"
+    data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
+  >
+    <div
+      class="euiComboBoxOptionsList__rowWrap"
+    >
+      <div
+        aria-label="grid"
+        aria-readonly="true"
+        class="ReactVirtualized__Grid ReactVirtualized__List"
+        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="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`props selectedOptions are rendered 1`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  className="euiComboBox"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    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 [
+        Object {
+          "label": "Mimas",
+        },
+        Object {
+          "label": "Iapetus",
+        },
+      ]
+    }
+    singleSelection={false}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas, Iapetus"
+  />
+</div>
+`;
+
+exports[`props singleSelection is rendered 1`] = `
+<div
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  className="euiComboBox"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    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 [
+        Object {
+          "label": "Mimas",
+        },
+      ]
+    }
+    singleSelection={true}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas"
+  />
+</div>
+`;
+
+exports[`props singleSelection selects existing option when opened 1`] = `
+<div
+  aria-expanded={true}
+  aria-haspopup="listbox"
+  className="euiComboBox euiComboBox-isOpen"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    fullWidth={false}
+    hasSelectedOptions={true}
+    inputRef={[Function]}
+    isListOpen={true}
+    noIcon={false}
+    onChange={[Function]}
+    onClear={[Function]}
+    onClick={[Function]}
+    onCloseListClick={[Function]}
+    onFocus={[Function]}
+    onOpenListClick={[Function]}
+    onRemoveOption={[Function]}
+    rootId={[Function]}
+    searchValue=""
+    selectedOptions={
+      Array [
+        Object {
+          "label": "Mimas",
+        },
+      ]
+    }
+    singleSelection={true}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value="Mimas"
+  />
+  <EuiPortal>
+    <EuiComboBoxOptionsList
+      activeOptionIndex={-1}
+      areAllOptionsSelected={false}
+      data-test-subj=""
+      fullWidth={false}
+      listRef={[Function]}
+      matchingOptions={
+        Array [
+          Object {
+            "data-test-subj": "titanOption",
+            "label": "Titan",
+          },
+          Object {
+            "label": "Enceladus",
+          },
+          Object {
+            "label": "Mimas",
+          },
+          Object {
+            "label": "Dione",
+          },
+          Object {
+            "label": "Iapetus",
+          },
+          Object {
+            "label": "Phoebe",
+          },
+          Object {
+            "label": "Rhea",
+          },
+          Object {
+            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+          },
+          Object {
+            "label": "Tethys",
+          },
+          Object {
+            "label": "Hyperion",
+          },
+        ]
+      }
+      onCloseList={[Function]}
+      onOptionClick={[Function]}
+      onOptionEnterKey={[Function]}
+      onScroll={[Function]}
+      optionRef={[Function]}
+      options={
+        Array [
+          Object {
+            "data-test-subj": "titanOption",
+            "label": "Titan",
+          },
+          Object {
+            "label": "Enceladus",
+          },
+          Object {
+            "label": "Mimas",
+          },
+          Object {
+            "label": "Dione",
+          },
+          Object {
+            "label": "Iapetus",
+          },
+          Object {
+            "label": "Phoebe",
+          },
+          Object {
+            "label": "Rhea",
+          },
+          Object {
+            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+          },
+          Object {
+            "label": "Tethys",
+          },
+          Object {
+            "label": "Hyperion",
+          },
+        ]
+      }
+      position="bottom"
+      rootId={[Function]}
+      rowHeight={27}
+      scrollToIndex={-1}
+      searchValue=""
+      selectedOptions={
+        Array [
+          Object {
+            "label": "Mimas",
+          },
+        ]
+      }
+      updatePosition={[Function]}
+      width={0}
+    />
+  </EuiPortal>
+</div>
+`;
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index e90e320eef2..957150762c4 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -7,7 +7,6 @@
 import React, {
   Component,
   FocusEventHandler,
-  createRef,
   KeyboardEventHandler,
 } from 'react';
 import classNames from 'classnames';
@@ -369,13 +368,14 @@ export class EuiComboBox<T> extends Component<
     this.setState({ hasFocus: true });
   };
 
-  onContainerBlur = (event: FocusEvent) => {
+  onContainerBlur: EventListener = event => {
     // close the options list, unless the use clicked on an option
 
     /**
      * FireFox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`.
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/explicitOriginalTarget
      */
+    // @ts-ignore
     const relatedTarget = (event.relatedTarget ||
       // @ts-ignore need to add window global override
       event.explicitOriginalTarget) as (Node | null);
diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.tsx b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
index 1aa59ca351a..a9170c7c110 100644
--- a/src/components/combo_box/combo_box_input/combo_box_pill.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
@@ -6,7 +6,7 @@ import { EuiI18n } from '../../i18n';
 import { EuiComboBoxOptionOption } from '..';
 import { OptionHandler } from '../types';
 
-interface EuiComboBoxPillProps<T> {
+export interface EuiComboBoxPillProps<T> {
   asPlainText?: boolean;
   children?: string;
   className?: string;
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 24be6528a3f..e69343571bb 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -1,4 +1,3 @@
-/// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./date_picker/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
 

From 328405befcf49d134915137da1adbd2b2375903f Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Thu, 20 Feb 2020 12:03:33 -0500
Subject: [PATCH 07/13] small update from personal review

---
 src/components/combo_box/combo_box.tsx                        | 4 ++--
 .../combo_box_options_list/combo_box_options_list.tsx         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 957150762c4..96c87ebd57b 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -153,7 +153,7 @@ export class EuiComboBox<T> extends Component<
       return;
     }
 
-    if (!listElement || !listElement) {
+    if (!listElement) {
       return;
     }
 
@@ -489,7 +489,7 @@ export class EuiComboBox<T> extends Component<
     const singleSelection = Boolean(singleSelectionProp);
     const changeOptions = singleSelection
       ? [addedOption]
-      : [...selectedOptions, addedOption];
+      : selectedOptions.concat(addedOption);
 
     if (onChange) {
       onChange(changeOptions);
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index ab5952804cf..d9fb471efb3 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -229,7 +229,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
           </p>
         );
       }
-    } else if (!options || options.length === 0) {
+    } else if (!options.length) {
       emptyStateContent = (
         <p>
           <EuiI18n

From 615a575433512ac9fac57ec29bda325b3d9441b6 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Thu, 20 Feb 2020 21:19:38 -0500
Subject: [PATCH 08/13] moves common types to types file (and out of index.ts)

---
 src/components/combo_box/combo_box.tsx        |  8 +++---
 .../combo_box_input/combo_box_input.tsx       |  9 +++++--
 .../combo_box_input/combo_box_pill.tsx        |  3 +--
 .../combo_box_option.tsx                      |  3 +--
 .../combo_box_options_list.tsx                |  5 ++--
 src/components/combo_box/index.ts             | 25 ++++---------------
 .../combo_box/matching_options.test.ts        |  2 +-
 src/components/combo_box/matching_options.ts  |  2 +-
 src/components/combo_box/types.ts             | 20 ++++++++++++++-
 9 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 96c87ebd57b..7e323830c67 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -30,16 +30,14 @@ import {
   EuiComboBoxInput,
 } from './combo_box_input/combo_box_input';
 import { EuiComboBoxOptionsListProps } from './combo_box_options_list/combo_box_options_list';
-import {
-  EuiComboBoxOptionOption,
-  EuiComboBoxOptionsListPosition,
-  EuiComboBoxSingleSelectionShape,
-} from './index';
 import {
   UpdatePositionHandler,
   OptionHandler,
   RefCallback,
   RefInstance,
+  EuiComboBoxOptionOption,
+  EuiComboBoxOptionsListPosition,
+  EuiComboBoxSingleSelectionShape,
 } from './types';
 import { EuiFilterSelectItem } from '../filter_group';
 import AutosizeInput from 'react-input-autosize';
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index b6300ddc985..850633b0529 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -6,9 +6,14 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFormControlLayout } from '../../form/form_control_layout';
 import { EuiComboBoxPill } from './combo_box_pill';
 import { htmlIdGenerator } from '../../../services';
-import { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape } from '..';
 import { EuiFormControlLayoutIconsProps } from '../../form/form_control_layout/form_control_layout_icons';
-import { UpdatePositionHandler, OptionHandler, RefCallback } from '../types';
+import {
+  EuiComboBoxOptionOption,
+  EuiComboBoxSingleSelectionShape,
+  OptionHandler,
+  RefCallback,
+  UpdatePositionHandler,
+} from '../types';
 
 const makeId = htmlIdGenerator();
 
diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.tsx b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
index a9170c7c110..bf2b877d857 100644
--- a/src/components/combo_box/combo_box_input/combo_box_pill.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
@@ -3,8 +3,7 @@ import classNames from 'classnames';
 
 import { EuiBadge } from '../../badge';
 import { EuiI18n } from '../../i18n';
-import { EuiComboBoxOptionOption } from '..';
-import { OptionHandler } from '../types';
+import { EuiComboBoxOptionOption, OptionHandler } from '../types';
 
 export interface EuiComboBoxPillProps<T> {
   asPlainText?: boolean;
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.tsx b/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
index 5246735317d..96fe745c668 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
@@ -2,8 +2,7 @@ import React, { Component, ReactNode, KeyboardEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { ENTER, SPACE } from '../../../services/key_codes';
-import { EuiComboBoxOptionOption } from '../index';
-import { OptionHandler, RefCallback } from '../types';
+import { EuiComboBoxOptionOption, OptionHandler, RefCallback } from '../types';
 
 export interface EuiComboBoxOptionProps<T> {
   children?: ReactNode;
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index d9fb471efb3..23ac4fafa1b 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -11,13 +11,14 @@ import { EuiLoadingSpinner } from '../../loading';
 import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
-import { EuiComboBoxOptionOption, EuiComboBoxOptionsListPosition } from '..';
 import { htmlIdGenerator } from '../../../services';
 import {
-  UpdatePositionHandler,
+  EuiComboBoxOptionOption,
+  EuiComboBoxOptionsListPosition,
   OptionHandler,
   RefCallback,
   RefInstance,
+  UpdatePositionHandler,
 } from '../types';
 
 const positionToClassNameMap: {
diff --git a/src/components/combo_box/index.ts b/src/components/combo_box/index.ts
index f3a835dac35..c30dc03e9f8 100644
--- a/src/components/combo_box/index.ts
+++ b/src/components/combo_box/index.ts
@@ -1,23 +1,8 @@
-import { ButtonHTMLAttributes } from 'react';
-import { CommonProps } from '../common';
-
 export { EuiComboBox, EuiComboBoxProps } from './combo_box';
 export * from './combo_box_input';
 export * from './combo_box_options_list';
-
-// note similarity to `Option` in `components/selectable/types.tsx`
-export type EuiComboBoxOptionOption<
-  T = string | number | string[] | undefined
-> = CommonProps &
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
-    isGroupLabelOption?: boolean;
-    label: string;
-    options?: Array<EuiComboBoxOptionOption<T>>;
-    value?: T;
-  };
-
-export type EuiComboBoxOptionsListPosition = 'top' | 'bottom';
-
-export interface EuiComboBoxSingleSelectionShape {
-  asPlainText?: boolean;
-}
+export {
+  EuiComboBoxOptionOption,
+  EuiComboBoxOptionsListPosition,
+  EuiComboBoxSingleSelectionShape,
+} from './types';
diff --git a/src/components/combo_box/matching_options.test.ts b/src/components/combo_box/matching_options.test.ts
index 808be420161..9f0c787157b 100644
--- a/src/components/combo_box/matching_options.test.ts
+++ b/src/components/combo_box/matching_options.test.ts
@@ -1,4 +1,4 @@
-import { EuiComboBoxOptionOption } from './index';
+import { EuiComboBoxOptionOption } from './types';
 import {
   flattenOptionGroups,
   getMatchingOptions,
diff --git a/src/components/combo_box/matching_options.ts b/src/components/combo_box/matching_options.ts
index bcd55170ff1..726e1a5b047 100644
--- a/src/components/combo_box/matching_options.ts
+++ b/src/components/combo_box/matching_options.ts
@@ -1,4 +1,4 @@
-import { EuiComboBoxOptionOption } from './index';
+import { EuiComboBoxOptionOption } from './types';
 
 export const flattenOptionGroups = <T>(
   optionsOrGroups: Array<EuiComboBoxOptionOption<T>>
diff --git a/src/components/combo_box/types.ts b/src/components/combo_box/types.ts
index 6e2245a3010..e0c3f1c7c4c 100644
--- a/src/components/combo_box/types.ts
+++ b/src/components/combo_box/types.ts
@@ -1,4 +1,16 @@
-import { EuiComboBoxOptionOption } from '.';
+import { ButtonHTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+
+// note similarity to `Option` in `components/selectable/types.tsx`
+export type EuiComboBoxOptionOption<
+  T = string | number | string[] | undefined
+> = CommonProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> & {
+    isGroupLabelOption?: boolean;
+    label: string;
+    options?: Array<EuiComboBoxOptionOption<T>>;
+    value?: T;
+  };
 
 export type UpdatePositionHandler = (
   listElement?: RefInstance<HTMLDivElement>
@@ -11,3 +23,9 @@ export type RefCallback<T> = {
 }['bivarianceHack'];
 
 export type RefInstance<T> = T | null;
+
+export type EuiComboBoxOptionsListPosition = 'top' | 'bottom';
+
+export interface EuiComboBoxSingleSelectionShape {
+  asPlainText?: boolean;
+}

From 8c2cc148ff3e9c6045e4b0a1bfa28735e0751656 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Thu, 20 Feb 2020 21:23:11 -0500
Subject: [PATCH 09/13] adds HTMLAttributes to EuiComboBoxProps per review
 feedback

---
 src/components/combo_box/combo_box.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 7e323830c67..a0834b4ebbd 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -8,6 +8,7 @@ import React, {
   Component,
   FocusEventHandler,
   KeyboardEventHandler,
+  HTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
 
@@ -47,7 +48,9 @@ type DrillProps<T> = Pick<
   'onCreateOption' | 'options' | 'renderOption' | 'selectedOptions'
 >;
 
-export interface EuiComboBoxProps<T> extends DrillProps<T> {
+export interface EuiComboBoxProps<T>
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>,
+    DrillProps<T> {
   'data-test-subj'?: string;
   async: boolean;
   className?: string;

From 7237be60661001f59dc8395906370f038b5d87fe Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Thu, 20 Feb 2020 21:26:38 -0500
Subject: [PATCH 10/13] gives FocusEvent types to onContainerBlur event

---
 src/components/combo_box/combo_box.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index a0834b4ebbd..41e2b61ef8c 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -376,10 +376,11 @@ export class EuiComboBox<T> extends Component<
      * FireFox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`.
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/explicitOriginalTarget
      */
-    // @ts-ignore
-    const relatedTarget = (event.relatedTarget ||
-      // @ts-ignore need to add window global override
-      event.explicitOriginalTarget) as (Node | null);
+    const focusEvent = event as FocusEvent & {
+      explicitOriginalTarget: EventTarget;
+    };
+    const relatedTarget = (focusEvent.relatedTarget ||
+      focusEvent.explicitOriginalTarget) as Node | null;
 
     const focusedInOptionsList =
       relatedTarget &&

From 3e5b0030f3d6528a4e045fb5f12ea3812d949635 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Thu, 20 Feb 2020 21:43:24 -0500
Subject: [PATCH 11/13] uses class members where feasible per review feedback

---
 src/components/combo_box/combo_box.tsx        | 109 ++++++++++--------
 .../combo_box_input/combo_box_input.tsx       |  30 ++---
 .../combo_box_options_list.tsx                |  10 +-
 3 files changed, 83 insertions(+), 66 deletions(-)

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 41e2b61ef8c..d983523753b 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -122,13 +122,62 @@ export class EuiComboBox<T> extends Component<
 
   // Refs
   comboBoxRefInstance: RefInstance<HTMLDivElement> = null;
+  comboBoxRefCallback: RefCallback<HTMLDivElement> = ref => {
+    // IE11 doesn't support the `relatedTarget` event property for blur events
+    // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
+    if (this.comboBoxRefInstance) {
+      this.comboBoxRefInstance.removeEventListener(
+        'focusout',
+        this.onContainerBlur
+      );
+    }
+
+    this.comboBoxRefInstance = ref;
+
+    if (this.comboBoxRefInstance) {
+      this.comboBoxRefInstance.addEventListener(
+        'focusout',
+        this.onContainerBlur
+      );
+      const comboBoxBounds = this.comboBoxRefInstance.getBoundingClientRect();
+      this.setState({
+        width: comboBoxBounds.width,
+      });
+    }
+  };
   autoSizeInputRefInstance: RefInstance<AutosizeInput & HTMLDivElement> = null;
+  autoSizeInputRefCallback: RefCallback<
+    AutosizeInput & HTMLDivElement
+  > = ref => {
+    this.autoSizeInputRefInstance = ref;
+  };
+
   searchInputRefInstance: RefInstance<HTMLInputElement> = null;
+  searchInputRefCallback: RefCallback<HTMLInputElement> = ref => {
+    this.searchInputRefInstance = ref;
+  };
+
   listRefInstance: RefInstance<HTMLDivElement> = null;
+  listRefCallback: RefCallback<HTMLDivElement> = ref => {
+    this.listRefInstance = ref;
+  };
+
   toggleButtonRefInstance: RefInstance<
     HTMLButtonElement | HTMLSpanElement
   > = null;
+  toggleButtonRefCallback: RefCallback<
+    HTMLButtonElement | HTMLSpanElement
+  > = ref => {
+    this.toggleButtonRefInstance = ref;
+  };
+
   optionsRefInstances: Array<RefInstance<EuiFilterSelectItem>> = [];
+  optionRefCallback: EuiComboBoxOptionsListProps<T>['optionRef'] = (
+    index,
+    ref
+  ) => {
+    this.optionsRefInstances[index] = ref;
+  };
 
   openList = () => {
     this.setState({
@@ -567,6 +616,12 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
+  onOptionListScroll = () => {
+    if (this.searchInputRefInstance) {
+      this.searchInputRefInstance.focus();
+    }
+  };
+
   onCloseListClick = () => {
     this.closeList();
   };
@@ -585,34 +640,6 @@ export class EuiComboBox<T> extends Component<
     });
   };
 
-  ownRef: RefCallback<HTMLDivElement> = node => {
-    // IE11 doesn't support the `relatedTarget` event property for blur events
-    // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-    if (this.comboBoxRefInstance) {
-      this.comboBoxRefInstance.removeEventListener(
-        'focusout',
-        this.onContainerBlur
-      );
-    }
-
-    this.comboBoxRefInstance = node;
-
-    if (this.comboBoxRefInstance) {
-      this.comboBoxRefInstance.addEventListener(
-        'focusout',
-        this.onContainerBlur
-      );
-      const comboBoxBounds = this.comboBoxRefInstance.getBoundingClientRect();
-      this.setState({
-        width: comboBoxBounds.width,
-      });
-    }
-  };
-
-  optionRef: EuiComboBoxOptionsListProps<T>['optionRef'] = (index, node) => {
-    this.optionsRefInstances[index] = node;
-  };
-
   componentDidMount() {
     this._isMounted = true;
 
@@ -786,20 +813,14 @@ export class EuiComboBox<T> extends Component<
             data-test-subj={optionsListDataTestSubj}
             fullWidth={fullWidth}
             isLoading={isLoading}
-            listRef={ref => {
-              this.listRefInstance = ref;
-            }}
+            listRef={this.listRefCallback}
             matchingOptions={this.state.matchingOptions}
             onCloseList={this.closeList}
             onCreateOption={onCreateOption}
             onOptionClick={this.onOptionClick}
             onOptionEnterKey={this.onOptionEnterKey}
-            onScroll={() => {
-              if (this.searchInputRefInstance) {
-                this.searchInputRefInstance.focus();
-              }
-            }}
-            optionRef={this.optionRef}
+            onScroll={this.onOptionListScroll}
+            optionRef={this.optionRefCallback}
             options={options}
             position={listPosition}
             renderOption={renderOption}
@@ -834,12 +855,10 @@ export class EuiComboBox<T> extends Component<
         className={classes}
         data-test-subj={dataTestSubj}
         onKeyDown={this.onKeyDown}
-        ref={this.ownRef}
+        ref={this.comboBoxRefCallback}
         role="combobox">
         <EuiComboBoxInput
-          autoSizeInputRef={ref => {
-            this.autoSizeInputRefInstance = ref;
-          }}
+          autoSizeInputRef={this.autoSizeInputRefCallback}
           compressed={compressed}
           focusedOptionId={
             this.hasActiveOption()
@@ -849,9 +868,7 @@ export class EuiComboBox<T> extends Component<
           fullWidth={fullWidth}
           hasSelectedOptions={selectedOptions.length > 0}
           id={id}
-          inputRef={ref => {
-            this.searchInputRefInstance = ref;
-          }}
+          inputRef={this.searchInputRefCallback}
           isDisabled={isDisabled}
           isListOpen={isListOpen}
           noIcon={!!noSuggestions}
@@ -869,9 +886,7 @@ export class EuiComboBox<T> extends Component<
           searchValue={searchValue}
           selectedOptions={selectedOptions}
           singleSelection={singleSelection}
-          toggleButtonRef={ref => {
-            this.toggleButtonRefInstance = ref;
-          }}
+          toggleButtonRef={this.toggleButtonRefCallback}
           updatePosition={this.updatePosition}
           value={value}
         />
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index 850633b0529..ddadbad9d1f 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -1,4 +1,4 @@
-import React, { Component, FocusEventHandler } from 'react';
+import React, { Component, FocusEventHandler, ChangeEventHandler } from 'react';
 import classNames from 'classnames';
 import AutosizeInput from 'react-input-autosize';
 
@@ -91,9 +91,22 @@ export class EuiComboBoxInput<T> extends Component<
     }
   }
 
+  inputOnChange: ChangeEventHandler<HTMLInputElement> = event => {
+    const { onChange, searchValue } = this.props;
+    if (onChange) {
+      onChange(event.target.value as typeof searchValue);
+    }
+  };
+
+  inputRefCallback = (ref: HTMLInputElement & AutosizeInput) => {
+    const { autoSizeInputRef } = this.props;
+    if (autoSizeInputRef) {
+      autoSizeInputRef(ref);
+    }
+  };
+
   render() {
     const {
-      autoSizeInputRef,
       compressed,
       focusedOptionId,
       fullWidth,
@@ -103,7 +116,6 @@ export class EuiComboBoxInput<T> extends Component<
       isDisabled,
       isListOpen,
       noIcon,
-      onChange,
       onClear,
       onClick,
       onCloseListClick,
@@ -246,17 +258,9 @@ export class EuiComboBoxInput<T> extends Component<
             id={id}
             inputRef={inputRef}
             onBlur={this.onBlur}
-            onChange={event => {
-              if (onChange) {
-                onChange(event.target.value as typeof searchValue);
-              }
-            }}
+            onChange={this.inputOnChange}
             onFocus={this.onFocus}
-            ref={(ref: HTMLInputElement & AutosizeInput) => {
-              if (autoSizeInputRef) {
-                autoSizeInputRef(ref);
-              }
-            }}
+            ref={this.inputRefCallback}
             role="textbox"
             style={{ fontSize: 14 }}
             value={searchValue}
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index 23ac4fafa1b..8fcfd1abf8f 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -136,9 +136,9 @@ export class EuiComboBoxOptionsList<T> extends Component<
     }
   };
 
-  listRefCallback: RefCallback<HTMLDivElement> = node => {
-    this.props.listRef(node);
-    this.listRefInstance = node;
+  listRefCallback: RefCallback<HTMLDivElement> = ref => {
+    this.props.listRef(ref);
+    this.listRefInstance = ref;
   };
 
   render() {
@@ -293,9 +293,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
                   onOptionClick(option);
                 }
               }}
-              ref={ref => {
-                optionRef(index, ref);
-              }}
+              ref={optionRef.bind(this, index)}
               isFocused={activeOptionIndex === index}
               id={rootId(`_option-${index}`)}
               title={label}

From e5e8289b31a0b7e60802581ac5985111c491743d Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Thu, 20 Feb 2020 22:05:08 -0500
Subject: [PATCH 12/13] updates CHANGELOG

---
 CHANGELOG.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fd3032ce3d..367a9b3013f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Converted `EuiCodeEditor` to Typescript ([#2836](https://github.com/elastic/eui/pull/2836))
-- Converted `EuiCode` and `EuiCodeBlock` and to Typescript ([#2835](https://github.com/elastic/eui/pull/2835))
+- Converted `EuiComboBox`, `EuiComboBoxInput`, `EuiComboBoxPill`, `EuiComboBoxOptionsList`, `EuiComboBoxOption`, `EuiComboBoxTitle` to TypeScript ([#2836](https://github.com/elastic/eui/pull/2838))
+- Converted `EuiCodeEditor` to TypeScript ([#2836](https://github.com/elastic/eui/pull/2836))
+- Converted `EuiCode` and `EuiCodeBlock` and to TypeScript ([#2835](https://github.com/elastic/eui/pull/2835))
 - Converted `EuiFilePicker` to TypeScript ([#2832](https://github.com/elastic/eui/issues/2832))
 - Exported `EuiSelectOptionProps` type ([#2830](https://github.com/elastic/eui/pull/2830))
 - Added `paperClip` glyph to `EuiIcon` ([#2845](https://github.com/elastic/eui/pull/2845))

From d0def5873795e89e8327d50e6f05ec8dd12fc511 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Fri, 21 Feb 2020 19:51:53 -0500
Subject: [PATCH 13/13] adds CommonProps extensions to base components

---
 CHANGELOG.md                                  |  2 +-
 src/components/combo_box/combo_box.tsx        |  4 +-
 .../combo_box_input/combo_box_input.tsx       |  3 +-
 .../combo_box_input/combo_box_pill.tsx        |  3 +-
 .../combo_box_option.tsx                      | 12 ++-
 .../combo_box_options_list.tsx                | 76 ++++++++++---------
 6 files changed, 57 insertions(+), 43 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 367a9b3013f..f70d2e2ce79 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Converted `EuiComboBox`, `EuiComboBoxInput`, `EuiComboBoxPill`, `EuiComboBoxOptionsList`, `EuiComboBoxOption`, `EuiComboBoxTitle` to TypeScript ([#2836](https://github.com/elastic/eui/pull/2838))
+- Converted `EuiComboBox`, `EuiComboBoxInput`, `EuiComboBoxPill`, `EuiComboBoxOptionsList`, `EuiComboBoxOption`, and `EuiComboBoxTitle` to TypeScript ([#2838](https://github.com/elastic/eui/pull/2838))
 - Converted `EuiCodeEditor` to TypeScript ([#2836](https://github.com/elastic/eui/pull/2836))
 - Converted `EuiCode` and `EuiCodeBlock` and to TypeScript ([#2835](https://github.com/elastic/eui/pull/2835))
 - Converted `EuiFilePicker` to TypeScript ([#2832](https://github.com/elastic/eui/issues/2832))
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index d983523753b..e071534e3e6 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -42,6 +42,7 @@ import {
 } from './types';
 import { EuiFilterSelectItem } from '../filter_group';
 import AutosizeInput from 'react-input-autosize';
+import { CommonProps } from '../common';
 
 type DrillProps<T> = Pick<
   EuiComboBoxOptionsListProps<T>,
@@ -49,7 +50,8 @@ type DrillProps<T> = Pick<
 >;
 
 export interface EuiComboBoxProps<T>
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>,
+  extends CommonProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>,
     DrillProps<T> {
   'data-test-subj'?: string;
   async: boolean;
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index ddadbad9d1f..de91822d9e4 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -14,10 +14,11 @@ import {
   RefCallback,
   UpdatePositionHandler,
 } from '../types';
+import { CommonProps } from '../../common';
 
 const makeId = htmlIdGenerator();
 
-export interface EuiComboBoxInputProps<T> {
+export interface EuiComboBoxInputProps<T> extends CommonProps {
   autoSizeInputRef?: RefCallback<AutosizeInput & HTMLInputElement>;
   compressed: boolean;
   focusedOptionId?: string;
diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.tsx b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
index bf2b877d857..ab53b49a2d0 100644
--- a/src/components/combo_box/combo_box_input/combo_box_pill.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_pill.tsx
@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import { EuiBadge } from '../../badge';
 import { EuiI18n } from '../../i18n';
 import { EuiComboBoxOptionOption, OptionHandler } from '../types';
+import { CommonProps } from '../../common';
 
-export interface EuiComboBoxPillProps<T> {
+export interface EuiComboBoxPillProps<T> extends CommonProps {
   asPlainText?: boolean;
   children?: string;
   className?: string;
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.tsx b/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
index 96fe745c668..3ee02230ee8 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
@@ -1,10 +1,18 @@
-import React, { Component, ReactNode, KeyboardEventHandler } from 'react';
+import React, {
+  Component,
+  ReactNode,
+  KeyboardEventHandler,
+  HTMLAttributes,
+} from 'react';
 import classNames from 'classnames';
 
 import { ENTER, SPACE } from '../../../services/key_codes';
 import { EuiComboBoxOptionOption, OptionHandler, RefCallback } from '../types';
+import { CommonProps } from '../../common';
 
-export interface EuiComboBoxOptionProps<T> {
+export interface EuiComboBoxOptionProps<T>
+  extends CommonProps,
+    Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index 8fcfd1abf8f..82a0a9ec3ce 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -1,4 +1,4 @@
-import React, { Component, ReactNode } from 'react';
+import React, { Component, ReactNode, ComponentProps } from 'react';
 import classNames from 'classnames';
 import { List, ListProps } from 'react-virtualized'; // eslint-disable-line import/named
 
@@ -20,6 +20,7 @@ import {
   RefInstance,
   UpdatePositionHandler,
 } from '../types';
+import { CommonProps } from '../../common';
 
 const positionToClassNameMap: {
   [position in EuiComboBoxOptionsListPosition]: string
@@ -30,42 +31,43 @@ const positionToClassNameMap: {
 
 const OPTION_CONTENT_CLASSNAME = 'euiComboBoxOption__content';
 
-export interface EuiComboBoxOptionsListProps<T> {
-  'data-test-subj': string;
-  activeOptionIndex?: number;
-  areAllOptionsSelected?: boolean;
-  fullWidth?: boolean;
-  getSelectedOptionForSearchValue?: (
-    searchValue: string,
-    selectedOptions: any[]
-  ) => EuiComboBoxOptionOption<T>;
-  isLoading?: boolean;
-  listRef: RefCallback<HTMLDivElement>;
-  matchingOptions: Array<EuiComboBoxOptionOption<T>>;
-  onCloseList: () => void;
-  onCreateOption?: (
-    searchValue: string,
-    options: Array<EuiComboBoxOptionOption<T>>
-  ) => boolean;
-  onOptionClick?: OptionHandler<T>;
-  onOptionEnterKey?: OptionHandler<T>;
-  onScroll?: ListProps['onScroll'];
-  optionRef: (index: number, node: RefInstance<EuiFilterSelectItem>) => void;
-  options: Array<EuiComboBoxOptionOption<T>>;
-  position?: EuiComboBoxOptionsListPosition;
-  renderOption?: (
-    option: EuiComboBoxOptionOption<T>,
-    searchValue: string,
-    OPTION_CONTENT_CLASSNAME: string
-  ) => ReactNode;
-  rootId: ReturnType<typeof htmlIdGenerator>;
-  rowHeight: number;
-  scrollToIndex?: number;
-  searchValue: string;
-  selectedOptions: Array<EuiComboBoxOptionOption<T>>;
-  updatePosition: UpdatePositionHandler;
-  width: number;
-}
+export type EuiComboBoxOptionsListProps<T> = CommonProps &
+  ComponentProps<typeof EuiPanel> & {
+    'data-test-subj': string;
+    activeOptionIndex?: number;
+    areAllOptionsSelected?: boolean;
+    fullWidth?: boolean;
+    getSelectedOptionForSearchValue?: (
+      searchValue: string,
+      selectedOptions: any[]
+    ) => EuiComboBoxOptionOption<T>;
+    isLoading?: boolean;
+    listRef: RefCallback<HTMLDivElement>;
+    matchingOptions: Array<EuiComboBoxOptionOption<T>>;
+    onCloseList: () => void;
+    onCreateOption?: (
+      searchValue: string,
+      options: Array<EuiComboBoxOptionOption<T>>
+    ) => boolean;
+    onOptionClick?: OptionHandler<T>;
+    onOptionEnterKey?: OptionHandler<T>;
+    onScroll?: ListProps['onScroll'];
+    optionRef: (index: number, node: RefInstance<EuiFilterSelectItem>) => void;
+    options: Array<EuiComboBoxOptionOption<T>>;
+    position?: EuiComboBoxOptionsListPosition;
+    renderOption?: (
+      option: EuiComboBoxOptionOption<T>,
+      searchValue: string,
+      OPTION_CONTENT_CLASSNAME: string
+    ) => ReactNode;
+    rootId: ReturnType<typeof htmlIdGenerator>;
+    rowHeight: number;
+    scrollToIndex?: number;
+    searchValue: string;
+    selectedOptions: Array<EuiComboBoxOptionOption<T>>;
+    updatePosition: UpdatePositionHandler;
+    width: number;
+  };
 
 export class EuiComboBoxOptionsList<T> extends Component<
   EuiComboBoxOptionsListProps<T>