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 index e4b38267db..809a420739 100644 --- 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 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 index 755e786891..b92fac4b32 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 @@ -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,6 +944,8 @@ 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]); @@ -949,8 +953,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El // 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 index 111ea86988..536fbe05ce 100644 --- 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); + }); }); });