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 76d0c86754..70b2eca6f9 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 @@ -147,6 +147,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 54d7fb07e5..6c71426583 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 @@ -26,6 +26,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); } [hidden] { @@ -122,6 +123,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 diff --git a/packages/multi-select-combo-box/test/chips.test.js b/packages/multi-select-combo-box/test/chips.test.js index 9cbbfe48bc..eb24656b8b 100644 --- a/packages/multi-select-combo-box/test/chips.test.js +++ b/packages/multi-select-combo-box/test/chips.test.js @@ -207,6 +207,29 @@ 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(minWidth).to.be.ok; + expect(chips[1].style.maxWidth).to.equal(minWidth); + }); }); });