diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-container.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-container.js index 3817385bd7..ce0502450e 100644 --- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-container.js +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-container.js @@ -13,6 +13,7 @@ registerStyles( #wrapper { display: flex; width: 100%; + min-width: 0; } :host([auto-expand-vertically]) #wrapper { diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js index 530b275f98..4e63a4cf54 100644 --- a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js +++ b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js @@ -41,6 +41,10 @@ const multiSelectComboBox = css` flex: 0 1 auto; } + ::slotted([slot='chip']) { + overflow: hidden; + } + :host(:is([readonly], [disabled])) ::slotted(input) { flex-grow: 0; flex-basis: 0; diff --git a/packages/multi-select-combo-box/test/visual/lumo/multi-select-combo-box.test.js b/packages/multi-select-combo-box/test/visual/lumo/multi-select-combo-box.test.js index bcf348df73..db879ebccf 100644 --- a/packages/multi-select-combo-box/test/visual/lumo/multi-select-combo-box.test.js +++ b/packages/multi-select-combo-box/test/visual/lumo/multi-select-combo-box.test.js @@ -146,6 +146,23 @@ describe('multi-select-combo-box', () => { element.selectedItems = items; await visualDiff(div, 'auto-expand-height'); }); + + it('auto expand long chip', async () => { + element.style.maxWidth = '300px'; + const items = [...element.items]; + items[0] = 'Super long item that does not fit into input'; + element.items = element.selectedItems = [items[0]]; + await visualDiff(div, 'auto-expand-long-chip'); + }); + + it('auto expand long chip clear button', async () => { + element.style.maxWidth = '300px'; + element.clearButtonVisible = true; + const items = [...element.items]; + items[0] = 'Super long item that does not fit into input'; + element.items = element.selectedItems = [items[0]]; + await visualDiff(div, 'auto-expand-long-chip-clear-button'); + }); }); describe('opened', () => { diff --git a/packages/multi-select-combo-box/test/visual/lumo/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png b/packages/multi-select-combo-box/test/visual/lumo/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png new file mode 100644 index 0000000000..d8fde00ea5 Binary files /dev/null and b/packages/multi-select-combo-box/test/visual/lumo/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png differ diff --git a/packages/multi-select-combo-box/test/visual/lumo/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png b/packages/multi-select-combo-box/test/visual/lumo/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png new file mode 100644 index 0000000000..f730a3e942 Binary files /dev/null and b/packages/multi-select-combo-box/test/visual/lumo/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png differ diff --git a/packages/multi-select-combo-box/test/visual/material/multi-select-combo-box.test.js b/packages/multi-select-combo-box/test/visual/material/multi-select-combo-box.test.js index 0aedb6c978..538db25725 100644 --- a/packages/multi-select-combo-box/test/visual/material/multi-select-combo-box.test.js +++ b/packages/multi-select-combo-box/test/visual/material/multi-select-combo-box.test.js @@ -135,6 +135,23 @@ describe('multi-select-combo-box', () => { element.style.maxWidth = '250px'; await visualDiff(div, 'auto-expand-max-width'); }); + + it('auto expand long chip', async () => { + element.style.maxWidth = '250px'; + const items = [...element.items]; + items[0] = 'Super long item that does not fit into input'; + element.items = element.selectedItems = [items[0]]; + await visualDiff(div, 'auto-expand-long-chip'); + }); + + it('auto expand long chip clear button', async () => { + element.style.maxWidth = '250px'; + element.clearButtonVisible = true; + const items = [...element.items]; + items[0] = 'Super long item that does not fit into input'; + element.items = element.selectedItems = [items[0]]; + await visualDiff(div, 'auto-expand-long-chip-clear-button'); + }); }); describe('opened', () => { diff --git a/packages/multi-select-combo-box/test/visual/material/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png b/packages/multi-select-combo-box/test/visual/material/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png new file mode 100644 index 0000000000..7c1c3ac988 Binary files /dev/null and b/packages/multi-select-combo-box/test/visual/material/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png differ diff --git a/packages/multi-select-combo-box/test/visual/material/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png b/packages/multi-select-combo-box/test/visual/material/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png new file mode 100644 index 0000000000..79786177a8 Binary files /dev/null and b/packages/multi-select-combo-box/test/visual/material/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png differ