From 784d91e8d5c9545f6489a6170f198672092eab41 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 21 Sep 2023 14:37:31 -0700
Subject: [PATCH] [EuiComboBox] Remove `AutosizeInput` references + update
 snapshots

---
 .../__snapshots__/combo_box.test.tsx.snap     | 73 ++++++-------------
 src/components/combo_box/combo_box.tsx        | 15 ----
 2 files changed, 23 insertions(+), 65 deletions(-)

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index 747e46f60e83..6bf8b35fb618 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -16,26 +16,19 @@ exports[`EuiComboBox is rendered 1`] = `
         data-test-subj="comboBoxInput"
         tabindex="-1"
       >
-        <div
+        <input
+          aria-autocomplete="list"
+          aria-controls=""
+          aria-expanded="false"
+          aria-invalid="false"
+          aria-label="aria-label"
           class="euiComboBox__input"
-          style="font-size: 14px; display: inline-block;"
-        >
-          <input
-            aria-autocomplete="list"
-            aria-controls=""
-            aria-expanded="false"
-            aria-invalid="false"
-            aria-label="aria-label"
-            data-test-subj="comboBoxSearchInput"
-            id="generated-id__eui-combobox-id"
-            role="combobox"
-            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-size: 14px; font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif; font-weight: 400; letter-spacing: normal; text-transform: none;"
-          />
-        </div>
+          data-test-subj="comboBoxSearchInput"
+          id="generated-id__eui-combobox-id"
+          role="combobox"
+          style="inline-size: 2px;"
+          value=""
+        />
       </div>
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
@@ -67,7 +60,6 @@ exports[`props aria-label attribute is rendered 1`] = `
 >
   <EuiComboBoxInput
     aria-label="Test label"
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={false}
@@ -102,7 +94,6 @@ exports[`props aria-labelledby attribute is rendered 1`] = `
 >
   <EuiComboBoxInput
     aria-labelledby="test-heading-id"
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={false}
@@ -136,7 +127,6 @@ exports[`props autoFocus is rendered 1`] = `
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={true}
@@ -179,7 +169,6 @@ exports[`props custom ID is rendered 1`] = `
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={true}
@@ -222,7 +211,6 @@ exports[`props delimiter is rendered 1`] = `
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={true}
@@ -265,7 +253,6 @@ exports[`props full width is rendered 1`] = `
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={true}
     hasSelectedOptions={true}
@@ -305,7 +292,6 @@ exports[`props isClearable=false disallows user from clearing input when no opti
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={false}
@@ -338,7 +324,6 @@ exports[`props isClearable=false disallows user from clearing input when options
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={true}
@@ -380,7 +365,6 @@ exports[`props isDisabled is rendered 1`] = `
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={true}
@@ -635,25 +619,18 @@ exports[`props options list is rendered 1`] = `
         data-test-subj="comboBoxInput"
         tabindex="-1"
       >
-        <div
+        <input
+          aria-autocomplete="list"
+          aria-controls="generated-id_listbox"
+          aria-expanded="true"
+          aria-invalid="false"
           class="euiComboBox__input"
-          style="font-size: 14px; display: inline-block;"
-        >
-          <input
-            aria-autocomplete="list"
-            aria-controls="generated-id_listbox"
-            aria-expanded="true"
-            aria-invalid="false"
-            data-test-subj="comboBoxSearchInput"
-            id="generated-id__eui-combobox-id"
-            role="combobox"
-            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>
+          data-test-subj="comboBoxSearchInput"
+          id="generated-id__eui-combobox-id"
+          role="combobox"
+          style="inline-size: 2px;"
+          value=""
+        />
       </div>
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
@@ -952,7 +929,6 @@ exports[`props selectedOptions are rendered 1`] = `
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={true}
@@ -995,7 +971,6 @@ exports[`props singleSelection is rendered 1`] = `
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={true}
@@ -1036,7 +1011,6 @@ exports[`props singleSelection prepend and append is rendered 1`] = `
 >
   <EuiComboBoxInput
     append="String"
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={false}
@@ -1079,7 +1053,6 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   onKeyDown={[Function]}
 >
   <EuiComboBoxInput
-    autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
     hasSelectedOptions={true}
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 9e967f976005..4d6e431b4dc9 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -18,7 +18,6 @@ import React, {
   RefCallback,
 } from 'react';
 import classNames from 'classnames';
-import AutosizeInput from 'react-input-autosize';
 
 import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
 import { getElementZIndex } from '../../services/popover';
@@ -256,12 +255,6 @@ export class EuiComboBox<T> extends Component<
       });
     }
   };
-  autoSizeInputRefInstance: RefInstance<AutosizeInput & HTMLDivElement> = null;
-  autoSizeInputRefCallback: RefCallback<AutosizeInput & HTMLDivElement> = (
-    ref
-  ) => {
-    this.autoSizeInputRefInstance = ref;
-  };
 
   searchInputRefInstance: RefInstance<HTMLInputElement> = null;
   searchInputRefCallback: RefCallback<HTMLInputElement> = (ref) => {
@@ -787,13 +780,6 @@ export class EuiComboBox<T> extends Component<
 
   componentDidMount() {
     this._isMounted = true;
-
-    // TODO: This will need to be called once the actual stylesheet loads.
-    setTimeout(() => {
-      if (this.autoSizeInputRefInstance) {
-        this.autoSizeInputRefInstance.copyInputStyles();
-      }
-    }, 100);
   }
 
   static getDerivedStateFromProps<T>(
@@ -1044,7 +1030,6 @@ export class EuiComboBox<T> extends Component<
         ref={this.comboBoxRefCallback}
       >
         <EuiComboBoxInput
-          autoSizeInputRef={this.autoSizeInputRefCallback}
           compressed={compressed}
           focusedOptionId={
             this.hasActiveOption()