fix: prevent long chips from exceeding available input width (#6905)

vaadin · Sep 19, 2024 · 93198fa · 93198fa
1 parent 3e072bd
commit 93198fa
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 0 deletions.
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
@@ -17,6 +17,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
@@ -44,6 +44,7 @@ const multiSelectComboBox = css`
 
   [part='chip'] {
     flex: 0 1 auto;
+    overflow: hidden;
   }
 
   :host(:is([readonly], [disabled])) ::slotted(input) {

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
@@ -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/...eenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png b/...eenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png
diff --git a/...sual/lumo/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png b/...sual/lumo/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png
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
@@ -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/...eenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png b/...eenshots/multi-select-combo-box/baseline/auto-expand-long-chip-clear-button.png
diff --git a/.../material/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png b/.../material/screenshots/multi-select-combo-box/baseline/auto-expand-long-chip.png