diff --git a/src/components/combo_box/combo_box.spec.tsx b/src/components/combo_box/combo_box.spec.tsx index e40d4ffd85d7..4fb066cbd0ca 100644 --- 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(); + 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(); 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 index 9ec390555882..0881e57982f6 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,7 +8,6 @@ import React, { Component, - ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, RefCallback, @@ -44,9 +43,9 @@ export interface EuiComboBoxInputProps extends CommonProps { isListOpen: boolean; noIcon: boolean; onBlur?: FocusEventHandler; - onChange?: (searchValue: string) => void; + onChange: (searchValue: string) => void; onClear?: () => void; - onClick?: () => void; + onClick: () => void; onCloseListClick: () => void; onFocus: FocusEventHandler; onOpenListClick: () => void; @@ -152,17 +151,11 @@ export class EuiComboBoxInput 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 = (event) => { - const { value } = event.target; - - this.updateInputSize(value); - this.props.onChange?.(value); - }; - render() { const { compressed, @@ -173,6 +166,7 @@ export class EuiComboBoxInput extends Component< isDisabled, isListOpen, noIcon, + onChange, onClear, onClick, onCloseListClick, @@ -350,7 +344,7 @@ export class EuiComboBoxInput 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}