diff --git a/src/components/combo_box/combo_box.spec.tsx b/src/components/combo_box/combo_box.spec.tsx index 4910941a1f5e..e40d4ffd85d7 100644 --- a/src/components/combo_box/combo_box.spec.tsx +++ b/src/components/combo_box/combo_box.spec.tsx @@ -50,6 +50,42 @@ describe('EuiComboBox', () => { }); }); + describe('input auto sizing', () => { + it('resizes the width of the input based to fit the search text', () => { + cy.realMount(); + cy.get('[data-test-subj="comboBoxSearchInput"]').should( + 'have.attr', + 'style', + 'inline-size: 2px;' + ); + + cy.get('[data-test-subj="comboBoxSearchInput"]').realClick(); + cy.realType('lorem ipsum dolor'); + cy.get('[data-test-subj="comboBoxSearchInput"]').should( + 'have.attr', + 'style', + 'inline-size: 121px;' + ); + }); + + it('does not exceed the maximum possible width of the input wrapper', () => { + cy.realMount(); + cy.get('[data-test-subj="comboBoxSearchInput"]').realClick(); + cy.realType( + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit......' + ); + + cy.get('[data-test-subj="comboBoxSearchInput"]').should( + 'have.attr', + 'style', + 'inline-size: 387px;' + ); + cy.get('[data-test-subj="comboBoxSearchInput"]') + .invoke('width') + .should('be.eq', 354); + }); + }); + describe('truncation', () => { const sharedProps = { style: { width: 200 },