feat: always show at least last selected item as a chip (#6702)

vaadin · Oct 27, 2023 · 0dd89ef · 0dd89ef
1 parent 5c5e0ff
commit 0dd89ef
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts
@@ -146,6 +146,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
+ * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `50px`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
  * ### Internal components

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
@@ -23,6 +23,7 @@ import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixi
 const multiSelectComboBox = css`
   :host {
     --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
+    --_chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 50px);
   }
 
   #chips {
@@ -111,6 +112,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
+ * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `50px`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
  * ### Internal components
@@ -942,15 +944,22 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       remainingWidth -= this.__getOverflowWidth();
     }
 
+    const chipMinWidth = parseInt(getComputedStyle(this).getPropertyValue('--_chip-min-width'));
+
     // Add chips until remaining width is exceeded
     for (let i = items.length - 1, refNode = null; i >= 0; i--) {
       const chip = this.__createChip(items[i]);
       this.insertBefore(chip, refNode);
 
       // If all the chips are visible, no need to measure remaining width
       if (!this.allChipsVisible && this.$.chips.clientWidth > remainingWidth) {
-        chip.remove();
-        break;
+        // Always show at least last selected item as a chip
+        if (refNode === null) {
+          chip.style.maxWidth = `${Math.max(chipMinWidth, remainingWidth)}px`;
+        } else {
+          chip.remove();
+          break;
+        }
       }
 
       items.pop();

diff --git a/packages/multi-select-combo-box/test/chips.test.js b/packages/multi-select-combo-box/test/chips.test.js
@@ -200,6 +200,31 @@ describe('chips', () => {
         await nextRender();
         expect(overflow.hasAttribute('hidden')).to.be.true;
       });
+
+      it('should always show at least one chip in addition to overflow', async () => {
+        comboBox.style.width = 'auto';
+        await nextResize(comboBox);
+
+        comboBox.selectedItems = ['apple', 'orange'];
+        await nextRender();
+
+        const chips = getChips(comboBox);
+        expect(chips.length).to.equal(2);
+        expect(getChipContent(chips[1])).to.equal('orange');
+      });
+
+      it('should set show max width on the chip based on CSS property', async () => {
+        comboBox.style.width = 'auto';
+        comboBox.clearButtonVisible = true;
+        await nextResize(comboBox);
+
+        comboBox.selectedItems = ['apple', 'orange'];
+        await nextRender();
+
+        const chips = getChips(comboBox);
+        const minWidth = getComputedStyle(comboBox).getPropertyValue('--_chip-min-width');
+        expect(chips[1].style.maxWidth).to.equal(minWidth);
+      });
     });
   });