Fix new input size logic not resetting the rendered width on selection

elastic · Oct 1, 2023 · e09faf2 · e09faf2
1 parent 01f23ab
commit e09faf2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/components/combo_box/combo_box.spec.tsx b/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();

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
@@ -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;
@@ -152,17 +151,11 @@ export class EuiComboBoxInput<T> extends Component<
     // 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) {
+      this.updateInputSize(this.props.searchValue);
       this.updatePosition();
     }
   }
 
-  inputOnChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-    const { value } = event.target;
-
-    this.updateInputSize(value);
-    this.props.onChange?.(value);
-  };
-
   render() {
     const {
       compressed,
@@ -173,6 +166,7 @@ export class EuiComboBoxInput<T> extends Component<
       isDisabled,
       isListOpen,
       noIcon,
+      onChange,
       onClear,
       onClick,
       onCloseListClick,
@@ -350,7 +344,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}