diff --git a/src/components/combo_box/combo_box.spec.tsx b/src/components/combo_box/combo_box.spec.tsx index e40d4ffd85d..4fb066cbd0c 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 9ec39055588..ead4a60c328 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; @@ -147,22 +146,15 @@ export class EuiComboBoxInput extends Component< }; componentDidUpdate(prevProps: EuiComboBoxInputProps) { - 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 = (event) => { - const { value } = event.target; - - this.updateInputSize(value); - this.props.onChange?.(value); - }; - render() { const { compressed, @@ -173,6 +165,7 @@ export class EuiComboBoxInput extends Component< isDisabled, isListOpen, noIcon, + onChange, onClear, onClick, onCloseListClick, @@ -350,7 +343,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} diff --git a/upcoming_changelogs/7240.md b/upcoming_changelogs/7240.md new file mode 100644 index 00000000000..b1c46716724 --- /dev/null +++ b/upcoming_changelogs/7240.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiComboBox` search input width not resetting correctly on selection