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