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

Author: web-padawan

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
@@ -487,6 +499,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       // Do not commit focused item on not blur / outside click
       if (this._ignoreCommitValue) {
         this._inputElementValue = '';
+        this._focusedIndex = -1;
         this._ignoreCommitValue = false;
       } else {
         this.__commitUserInput();

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);

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:
  *
@@ -141,12 +144,8 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * In addition to `<vaadin-multi-select-combo-box>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-multi-select-combo-box-overlay>` - has the same API as `<vaadin-overlay>`.
+ * - `<vaadin-multi-select-combo-box-chip>`
  * - `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.
- * - `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.
- *
- * Note: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is
- * propagated to these components.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

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:
  *
@@ -78,12 +81,8 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
  * In addition to `<vaadin-multi-select-combo-box>` itself, the following internal
  * components are themable:
  *
- * - `<vaadin-multi-select-combo-box-overlay>` - has the same API as `<vaadin-overlay>`.
+ * - `<vaadin-multi-select-combo-box-chip>`
  * - `<vaadin-multi-select-combo-box-item>` - has the same API as `<vaadin-item>`.
- * - `<vaadin-multi-select-combo-box-container>` - has the same API as `<vaadin-input-container>`.
- *
- * Note: the `theme` attribute value set on `<vaadin-multi-select-combo-box>` is
- * propagated to these components.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -149,13 +148,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>
     `;

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);
+      });
+    });
+  });
 });

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);