[EuiComboBox] Fix new input size util not resetting correctly (#7240)

Author: cee-chen

src/components/combo_box/combo_box.spec.tsx

@@ -68,6 +68,26 @@ describe('EuiComboBox', () => {
       );
     });
 
+    it('correctly resets the input size when the search value is cleared', () => {
+      cy.realMount(<EuiComboBox options={[{ label: 'Test 1 2 3' }]} />);
+      cy.get('[data-test-subj="comboBoxSearchInput"]').realClick();
+
+      cy.realType('Test 1 2 3');
+      cy.get('[data-test-subj="comboBoxSearchInput"]').should(
+        'have.attr',
+        'style',
+        'inline-size: 67px;'
+      );
+
+      cy.realPress('{downarrow}');
+      cy.realPress('Enter');
+      cy.get('[data-test-subj="comboBoxSearchInput"]').should(
+        'have.attr',
+        'style',
+        'inline-size: 2px;'
+      );
+    });
+
     it('does not exceed the maximum possible width of the input wrapper', () => {
       cy.realMount(<EuiComboBox options={[]} />);
       cy.get('[data-test-subj="comboBoxSearchInput"]').realClick();

src/components/combo_box/combo_box_input/combo_box_input.tsx

@@ -8,7 +8,6 @@
 
 import React, {
   Component,
-  ChangeEventHandler,
   FocusEventHandler,
   KeyboardEventHandler,
   RefCallback,
@@ -44,9 +43,9 @@ export interface EuiComboBoxInputProps<T> extends CommonProps {
   isListOpen: boolean;
   noIcon: boolean;
   onBlur?: FocusEventHandler<HTMLInputElement>;
-  onChange?: (searchValue: string) => void;
+  onChange: (searchValue: string) => void;
   onClear?: () => void;
-  onClick?: () => void;
+  onClick: () => void;
   onCloseListClick: () => void;
   onFocus: FocusEventHandler<HTMLInputElement>;
   onOpenListClick: () => void;
@@ -147,22 +146,15 @@ export class EuiComboBoxInput<T> extends Component<
   };
 
   componentDidUpdate(prevProps: EuiComboBoxInputProps<T>) {
-    const { searchValue } = prevProps;
+    if (prevProps.searchValue !== this.props.searchValue) {
+      this.updateInputSize(this.props.searchValue);
 
-    // We need to update the position of everything if the user enters enough input to change
-    // the size of the input.
-    if (searchValue !== this.props.searchValue) {
+      // We need to update the position of everything if the user enters enough input to change
+      // the size of the input.
       this.updatePosition();
     }
   }
 
-  inputOnChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const { value } = event.target;
-
-    this.updateInputSize(value);
-    this.props.onChange?.(value);
-  };
-
   render() {
     const {
       compressed,
@@ -173,6 +165,7 @@ export class EuiComboBoxInput<T> extends Component<
       isDisabled,
       isListOpen,
       noIcon,
+      onChange,
       onClear,
       onClick,
       onCloseListClick,
@@ -350,7 +343,7 @@ export class EuiComboBoxInput<T> extends Component<
             disabled={isDisabled}
             id={id}
             onBlur={this.onBlur}
-            onChange={this.inputOnChange}
+            onChange={(event) => onChange(event.target.value)}
             onFocus={this.onFocus}
             onKeyDown={this.onKeyDown}
             ref={this.inputRefCallback}

upcoming_changelogs/7240.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiComboBox` search input width not resetting correctly on selection