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

web-padawan · web-padawan · commit f2260fbc674a · 2025-07-29T11:06:39.000+03:00
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-mixin.js
@@ -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
diff --git a/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-overlay.js b/packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-overlay.js
@@ -45,6 +45,22 @@ class MultiSelectComboBoxOverlay extends ComboBoxOverlayMixin(
       </div>
     `;
   }
+
+  /**
+   * @protected
+   * @override
+   */
+  _attachOverlay() {
+    this.showPopover();
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  _detachOverlay() {
+    this.hidePopover();
+  }
 }
 
 defineCustomElement(MultiSelectComboBoxOverlay);
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
@@ -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:
  *
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
@@ -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:
  *
@@ -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>
     `;
diff --git a/packages/multi-select-combo-box/test/basic.test.js b/packages/multi-select-combo-box/test/basic.test.js
@@ -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);
+      });
+    });
+  });
 });
diff --git a/packages/multi-select-combo-box/test/chips.test.js b/packages/multi-select-combo-box/test/chips.test.js
@@ -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);
diff --git a/packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js b/packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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 */
@@ -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>
@@ -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>
@@ -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>
@@ -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>

Original file line number	Diff line number	Diff line change
`@@ -110,6 +110,9 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap`
`110`	`110`	* `helper-text` \| The helper text element wrapper
`111`	`111`	* `required-indicator` \| The `required` state indicator element
`112`	`112`	* `toggle-button` \| The toggle button
	`113`	+ * `overlay` \| The overlay container
	`114`	+ * `content` \| The overlay content
	`115`	+ * `loader` \| The loading indicator shown while loading items
`113`	`116`	`*`
`114`	`117`	`* The following state attributes are available for styling:`
`115`	`118`	`*`