fix: prevent long chips from exceeding available input width

vaadin · Dec 4, 2023 · 3f637db · 3f637db
1 parent 01e5878
commit 3f637db
Show file tree

Hide file tree

Showing 8 changed files with 39 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
@@ -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
@@ -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
@@ -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