Skip to content

refactor!: update multi-select-combo-box to use native popover #9814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 29, 2025
Merged

refactor!: update multi-select-combo-box to use native popover #9814

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f2260fb
refactor!: update multi-select-combo-box to use native popover
web-padawan Jul 28, 2025
685f561
docs: remove mention of overlay and theme propagation
web-padawan Jul 29, 2025
41ae485
fix: reset focused index when ignoring value commit
web-padawan Jul 29, 2025
50d50bb
test: try waiting for vaadin-overlay-open event
web-padawan Jul 29, 2025
606b344
test: try moving resetMouse to afterEach block
web-padawan Jul 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,18 @@ export const MultiSelectComboBoxMixin = (superClass) =>
});
}

/**
* Override method from `ComboBoxBaseMixin` to render scroller in the slot.
* @protected
* @override
*/
_renderScroller(scroller) {
scroller.setAttribute('slot', 'overlay');
// Prevent focusing scroller on input Tab
scroller.setAttribute('tabindex', '-1');
this.appendChild(scroller);
}

/**
* Override method from `ComboBoxBaseMixin` to implement clearing logic.
* @protected
Expand Down
16 changes: 16 additions & 0 deletions packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-overlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,22 @@ class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(
</div>
`;
}

/**
* @protected
* @override
*/
_attachOverlay() {
this.showPopover();
}

/**
* @protected
* @override
*/
_detachOverlay() {
this.hidePopover();
}
}

defineCustomElement(MultiSelectComboBoxOverlay);
3 changes: 3 additions & 0 deletions packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,9 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
* `helper-text` | The helper text element wrapper
* `required-indicator` | The `required` state indicator element
* `toggle-button` | The toggle button
* `overlay` | The overlay container
* `content` | The overlay content
* `loader` | The loading indicator shown while loading items
*
* The following state attributes are available for styling:
*
Expand Down
9 changes: 8 additions & 1 deletion packages/multi-select-combo-box/src/vaadin-multi-select-combo-box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
* `helper-text` | The helper text element wrapper
* `required-indicator` | The `required` state indicator element
* `toggle-button` | The toggle button
* `overlay` | The overlay container
* `content` | The overlay content
* `loader` | The loading indicator shown while loading items
*
* The following state attributes are available for styling:
*
Expand Down Expand Up @@ -149,13 +152,17 @@ class MultiSelectComboBox extends MultiSelectComboBoxMixin(

<vaadin-multi-select-combo-box-overlay
id="overlay"
popover="manual"
exportparts="overlay, content, loader"
.owner="${this}"
.opened="${this._overlayOpened}"
?loading="${this.loading}"
theme="${ifDefined(this._theme)}"
.positionTarget="${this._inputField}"
no-vertical-overlap
></vaadin-multi-select-combo-box-overlay>
>
<slot name="overlay"></slot>
</vaadin-multi-select-combo-box-overlay>

<slot name="tooltip"></slot>
`;
Expand Down
19 changes: 19 additions & 0 deletions packages/multi-select-combo-box/test/basic.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,4 +407,23 @@ describe('basic', () => {
expect(item.textContent).to.equal('');
});
});

describe('exportparts', () => {
let overlay;

beforeEach(() => {
overlay = comboBox.$.overlay;
});

it('should export overlay parts for styling', () => {
const parts = [...overlay.shadowRoot.querySelectorAll('[part]')]
.map((el) => el.getAttribute('part'))
.filter((part) => part !== 'backdrop');
const exportParts = overlay.getAttribute('exportparts').split(', ');

parts.forEach((part) => {
expect(exportParts).to.include(part);
});
});
});
});
2 changes: 1 addition & 1 deletion packages/multi-select-combo-box/test/chips.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -556,7 +556,7 @@ describe('chips', () => {
it('should adapt overlay width to the input field width while opened', async () => {
comboBox.opened = true;

const overlay = document.querySelector('vaadin-multi-select-combo-box-overlay');
const overlay = comboBox.$.overlay;
const overlayPart = overlay.$.overlay;
const width = overlayPart.offsetWidth;
expect(width).to.equal(comboBox.clientWidth);
Expand Down
132 changes: 96 additions & 36 deletions packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@ export const snapshots = {};

snapshots["vaadin-multi-select-combo-box host default"] =
`<vaadin-multi-select-combo-box>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -39,6 +47,14 @@ snapshots["vaadin-multi-select-combo-box host default"] =

snapshots["vaadin-multi-select-combo-box host label"] =
`<vaadin-multi-select-combo-box has-label="">
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -77,6 +93,14 @@ snapshots["vaadin-multi-select-combo-box host label"] =

snapshots["vaadin-multi-select-combo-box host helper"] =
`<vaadin-multi-select-combo-box has-helper="">
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -123,6 +147,14 @@ snapshots["vaadin-multi-select-combo-box host error"] =
has-error-message=""
invalid=""
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -162,6 +194,14 @@ snapshots["vaadin-multi-select-combo-box host error"] =

snapshots["vaadin-multi-select-combo-box host required"] =
`<vaadin-multi-select-combo-box required="">
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -202,6 +242,14 @@ snapshots["vaadin-multi-select-combo-box host disabled"] =
aria-disabled="true"
disabled=""
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -241,6 +289,14 @@ snapshots["vaadin-multi-select-combo-box host disabled"] =

snapshots["vaadin-multi-select-combo-box host readonly"] =
`<vaadin-multi-select-combo-box readonly="">
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -279,6 +335,14 @@ snapshots["vaadin-multi-select-combo-box host readonly"] =

snapshots["vaadin-multi-select-combo-box host placeholder"] =
`<vaadin-multi-select-combo-box placeholder="Placeholder">
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -319,6 +383,14 @@ snapshots["vaadin-multi-select-combo-box host opened default"] =
focused=""
opened=""
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
slot="overlay"
tabindex="-1"
>
</vaadin-multi-select-combo-box-scroller>
<label
for="input-vaadin-multi-select-combo-box-4"
id="label-vaadin-multi-select-combo-box-0"
Expand Down Expand Up @@ -356,31 +428,27 @@ snapshots["vaadin-multi-select-combo-box host opened default"] =

snapshots["vaadin-multi-select-combo-box host opened overlay"] =
`<vaadin-multi-select-combo-box-overlay
exportparts="overlay, content, loader"
id="overlay"
no-vertical-overlap=""
popover="manual"
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
>
</vaadin-multi-select-combo-box-scroller>
<slot name="overlay">
</slot>
</vaadin-multi-select-combo-box-overlay>
`;
/* end snapshot vaadin-multi-select-combo-box host opened overlay */

snapshots["vaadin-multi-select-combo-box host opened overlay class"] =
`<vaadin-multi-select-combo-box-overlay
class="custom multi-select-combo-box-overlay"
exportparts="overlay, content, loader"
id="overlay"
no-vertical-overlap=""
popover="manual"
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
>
</vaadin-multi-select-combo-box-scroller>
<slot name="overlay">
</slot>
</vaadin-multi-select-combo-box-overlay>
`;
/* end snapshot vaadin-multi-select-combo-box host opened overlay class */
Expand Down Expand Up @@ -437,15 +505,13 @@ snapshots["vaadin-multi-select-combo-box shadow default"] =
</div>
</div>
<vaadin-multi-select-combo-box-overlay
exportparts="overlay, content, loader"
id="overlay"
no-vertical-overlap=""
popover="manual"
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
>
</vaadin-multi-select-combo-box-scroller>
<slot name="overlay">
</slot>
</vaadin-multi-select-combo-box-overlay>
<slot name="tooltip">
</slot>
Expand Down Expand Up @@ -507,15 +573,13 @@ snapshots["vaadin-multi-select-combo-box shadow disabled"] =
</div>
</div>
<vaadin-multi-select-combo-box-overlay
exportparts="overlay, content, loader"
id="overlay"
no-vertical-overlap=""
popover="manual"
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
>
</vaadin-multi-select-combo-box-scroller>
<slot name="overlay">
</slot>
</vaadin-multi-select-combo-box-overlay>
<slot name="tooltip">
</slot>
Expand Down Expand Up @@ -577,15 +641,13 @@ snapshots["vaadin-multi-select-combo-box shadow readonly"] =
</div>
</div>
<vaadin-multi-select-combo-box-overlay
exportparts="overlay, content, loader"
id="overlay"
no-vertical-overlap=""
popover="manual"
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
>
</vaadin-multi-select-combo-box-scroller>
<slot name="overlay">
</slot>
</vaadin-multi-select-combo-box-overlay>
<slot name="tooltip">
</slot>
Expand Down Expand Up @@ -647,15 +709,13 @@ snapshots["vaadin-multi-select-combo-box shadow invalid"] =
</div>
</div>
<vaadin-multi-select-combo-box-overlay
exportparts="overlay, content, loader"
id="overlay"
no-vertical-overlap=""
popover="manual"
>
<vaadin-multi-select-combo-box-scroller
aria-multiselectable="true"
id="vaadin-multi-select-combo-box-scroller-3"
role="listbox"
>
</vaadin-multi-select-combo-box-scroller>
<slot name="overlay">
</slot>
</vaadin-multi-select-combo-box-overlay>
<slot name="tooltip">
</slot>
Expand Down
Loading