@vaadin/combo-box 23.1.0 → 23.2.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.1.0",
+  "version": "23.2.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -19,10 +19,10 @@
   "main": "vaadin-combo-box.js",
   "type": "module",
   "files": [
+    "lit.d.ts",
+    "lit.js",
     "src",
     "theme",
-    "lit.js",
-    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -36,23 +36,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.1.0",
-    "@vaadin/field-base": "^23.1.0",
-    "@vaadin/input-container": "^23.1.0",
-    "@vaadin/item": "^23.1.0",
-    "@vaadin/lit-renderer": "^23.1.0",
-    "@vaadin/vaadin-lumo-styles": "^23.1.0",
-    "@vaadin/vaadin-material-styles": "^23.1.0",
-    "@vaadin/vaadin-overlay": "^23.1.0",
-    "@vaadin/vaadin-themable-mixin": "^23.1.0"
+    "@vaadin/component-base": "23.2.0-alpha2",
+    "@vaadin/field-base": "23.2.0-alpha2",
+    "@vaadin/input-container": "23.2.0-alpha2",
+    "@vaadin/item": "23.2.0-alpha2",
+    "@vaadin/lit-renderer": "23.2.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha2",
+    "@vaadin/vaadin-overlay": "23.2.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.1.0",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha2",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "^23.1.0",
+    "@vaadin/text-field": "23.2.0-alpha2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "322bba42b83f908a78cd972b06acadc5da95a69d"
+  "gitHead": "c9b8113d0fa9a602f8b9cb915c1826355af2e8df"
 }

package/src/vaadin-combo-box-data-provider-mixin.js

@@ -78,7 +78,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     ready() {
       super.ready();
       this.clearCache();
-      this.$.dropdown.addEventListener('index-requested', (e) => {
+      this._scroller.addEventListener('index-requested', (e) => {
         const index = e.detail.index;
         const currentScrollerPos = e.detail.currentScrollerPos;
         const allowedIndexRange = Math.floor(this.pageSize * 1.5);
@@ -177,47 +177,44 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     /** @private */
     _loadPage(page) {
       // Make sure same page isn't requested multiple times.
-      if (!this._pendingRequests[page] && this.dataProvider) {
-        this.loading = true;
-
-        const params = {
-          page,
-          pageSize: this.pageSize,
-          filter: this.filter,
-        };
-
-        const callback = (items, size) => {
-          if (this._pendingRequests[page] === callback) {
-            if (!this.filteredItems) {
-              const filteredItems = [];
-              filteredItems.splice(params.page * params.pageSize, items.length, ...items);
-              this.filteredItems = filteredItems;
-            } else {
-              this.splice('filteredItems', params.page * params.pageSize, items.length, ...items);
-            }
-            // Update selectedItem from filteredItems if value is set
-            if (this._isValidValue(this.value) && this._getItemValue(this.selectedItem) !== this.value) {
-              this._selectItemForValue(this.value);
-            }
-            if (!this.opened && !this.hasAttribute('focused')) {
-              this._commitValue();
-            }
-            this.size = size;
-
-            delete this._pendingRequests[page];
-
-            if (Object.keys(this._pendingRequests).length === 0) {
-              this.loading = false;
-            }
-          }
-        };
+      if (this._pendingRequests[page] || !this.dataProvider) {
+        return;
+      }
+
+      const params = {
+        page,
+        pageSize: this.pageSize,
+        filter: this.filter,
+      };
 
-        if (!this._pendingRequests[page]) {
-          // Don't request page if it's already being requested
-          this._pendingRequests[page] = callback;
-          this.dataProvider(params, callback);
+      const callback = (items, size) => {
+        if (this._pendingRequests[page] !== callback) {
+          return;
         }
-      }
+
+        const filteredItems = this.filteredItems ? [...this.filteredItems] : [];
+        filteredItems.splice(params.page * params.pageSize, items.length, ...items);
+        this.filteredItems = filteredItems;
+
+        if (!this.opened && !this.hasAttribute('focused')) {
+          this._commitValue();
+        }
+        this.size = size;
+
+        delete this._pendingRequests[page];
+
+        if (Object.keys(this._pendingRequests).length === 0) {
+          this.loading = false;
+        }
+      };
+
+      this._pendingRequests[page] = callback;
+      // Set the `loading` flag only after marking the request as pending
+      // to prevent the same page from getting requested multiple times
+      // as a result of `__loadingChanged` in the scroller which requests
+      // a virtualizer update which in turn may trigger a data provider page request.
+      this.loading = true;
+      this.dataProvider(params, callback);
     }
 
     /** @private */
@@ -287,7 +284,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     /** @private */
     _warnDataProviderValue(dataProvider, value) {
       if (dataProvider && value !== '' && (this.selectedItem === undefined || this.selectedItem === null)) {
-        const valueIndex = this._indexOfValue(value, this.filteredItems);
+        const valueIndex = this.__getItemIndexByValue(this.filteredItems, value);
         if (valueIndex < 0 || !this._getItemLabel(this.filteredItems[valueIndex])) {
           console.warn(
             'Warning: unable to determine the label for the provided `value`. ' +

package/src/vaadin-combo-box-light.js

@@ -3,7 +3,9 @@
  * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import './vaadin-combo-box-dropdown.js';
+import './vaadin-combo-box-item.js';
+import './vaadin-combo-box-overlay.js';
+import './vaadin-combo-box-scroller.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -75,19 +77,16 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
 
       <slot></slot>
 
-      <vaadin-combo-box-dropdown
-        id="dropdown"
-        opened="[[opened]]"
+      <vaadin-combo-box-overlay
+        id="overlay"
+        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
+        opened="[[_overlayOpened]]"
+        loading$="[[loading]]"
+        theme$="[[_theme]]"
         position-target="[[inputElement]]"
-        restore-focus-on-close="[[__restoreFocusOnClose]]"
+        no-vertical-overlap
         restore-focus-node="[[inputElement]]"
-        renderer="[[renderer]]"
-        _focused-index="[[_focusedIndex]]"
-        _item-id-path="[[itemIdPath]]"
-        _item-label-path="[[itemLabelPath]]"
-        loading="[[loading]]"
-        theme="[[_theme]]"
-      ></vaadin-combo-box-dropdown>
+      ></vaadin-combo-box-overlay>
     `;
   }
 

package/src/vaadin-combo-box-mixin.d.ts

@@ -147,6 +147,11 @@ export declare class ComboBoxMixinClass<TItem> {
 
   protected _inputElementValue: string | undefined;
 
+  /**
+   * Tag name prefix used by scroller and items.
+   */
+  protected readonly _tagNamePrefix: string;
+
   /**
    * Requests an update for the content of items.
    * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
@@ -177,6 +182,4 @@ export declare class ComboBoxMixinClass<TItem> {
   checkValidity(): boolean;
 
   protected _revertInputValue(): void;
-
-  protected _getItemElements(): HTMLElement[];
 }

package/src/vaadin-combo-box-mixin.js

@@ -12,6 +12,34 @@ import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
+/**
+ * Checks if the value is supported as an item value in this control.
+ *
+ * @param {unknown} value
+ * @return {boolean}
+ */
+function isValidValue(value) {
+  return value !== undefined && value !== null;
+}
+
+/**
+ * Returns the index of the first item that satisfies the provided testing function
+ * ignoring placeholder items.
+ *
+ * @param {Array<ComboBoxItem | string>} items
+ * @param {Function} callback
+ * @return {number}
+ */
+function findItemIndex(items, callback) {
+  return items.findIndex((item) => {
+    if (item instanceof ComboBoxPlaceholder) {
+      return false;
+    }
+
+    return callback(item);
+  });
+}
+
 /**
  * @polymerMixin
  * @param {function(new:HTMLElement)} subclass
@@ -95,6 +123,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         filteredItems: {
           type: Array,
+          observer: '_filteredItemsChanged',
         },
 
         /**
@@ -111,7 +140,6 @@ export const ComboBoxMixin = (subclass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
-          observer: '_loadingChanged',
         },
 
         /**
@@ -196,16 +224,22 @@ export const ComboBoxMixin = (subclass) =>
         _closeOnBlurIsPrevented: Boolean,
 
         /** @private */
-        __restoreFocusOnClose: Boolean,
+        _scroller: Object,
+
+        /** @private */
+        _overlayOpened: {
+          type: Boolean,
+          observer: '_overlayOpenedChanged',
+        },
       };
     }
 
     static get observers() {
       return [
         '_filterChanged(filter, itemValuePath, itemLabelPath)',
-        '_itemsOrPathsChanged(items.*, itemValuePath, itemLabelPath)',
-        '_filteredItemsChanged(filteredItems.*, itemValuePath, itemLabelPath)',
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
+        '_openedOrItemsChanged(opened, filteredItems, loading)',
+        '_updateScroller(_scroller, filteredItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
       ];
     }
 
@@ -214,13 +248,20 @@ export const ComboBoxMixin = (subclass) =>
       this._boundOnFocusout = this._onFocusout.bind(this);
       this._boundOverlaySelectedItemChanged = this._overlaySelectedItemChanged.bind(this);
       this._boundOnClearButtonMouseDown = this.__onClearButtonMouseDown.bind(this);
-      this._boundClose = this.close.bind(this);
-      this._boundOnOpened = this._onOpened.bind(this);
       this._boundOnClick = this._onClick.bind(this);
       this._boundOnOverlayTouchAction = this._onOverlayTouchAction.bind(this);
       this._boundOnTouchend = this._onTouchend.bind(this);
     }
 
+    /**
+     * Tag name prefix used by scroller and items.
+     * @protected
+     * @return {string}
+     */
+    get _tagNamePrefix() {
+      return 'vaadin-combo-box';
+    }
+
     /**
      * @return {string | undefined}
      * @protected
@@ -274,23 +315,19 @@ export const ComboBoxMixin = (subclass) =>
     ready() {
       super.ready();
 
+      this._initOverlay();
+      this._initScroller();
+
       this.addEventListener('focusout', this._boundOnFocusout);
 
       this._lastCommittedValue = this.value;
 
-      this.$.dropdown.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
-
-      this.addEventListener('vaadin-combo-box-dropdown-closed', this._boundClose);
-      this.addEventListener('vaadin-combo-box-dropdown-opened', this._boundOnOpened);
       this.addEventListener('click', this._boundOnClick);
-
-      this.$.dropdown.addEventListener('vaadin-overlay-touch-action', this._boundOnOverlayTouchAction);
-
       this.addEventListener('touchend', this._boundOnTouchend);
 
       const bringToFrontListener = () => {
         requestAnimationFrame(() => {
-          this.$.dropdown.$.overlay.bringToFront();
+          this.$.overlay.bringToFront();
         });
       };
 
@@ -302,6 +339,14 @@ export const ComboBoxMixin = (subclass) =>
       this.addController(new VirtualKeyboardController(this));
     }
 
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      // Close the overlay on detach
+      this.close();
+    }
+
     /**
      * Requests an update for the content of items.
      * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
@@ -309,11 +354,11 @@ export const ComboBoxMixin = (subclass) =>
      * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
      */
     requestContentUpdate() {
-      if (!this.$.dropdown._scroller) {
+      if (!this._scroller) {
         return;
       }
 
-      this.$.dropdown._scroller.requestContentUpdate();
+      this._scroller.requestContentUpdate();
 
       this._getItemElements().forEach((item) => {
         item.requestContentUpdate();
@@ -337,6 +382,109 @@ export const ComboBoxMixin = (subclass) =>
       this.opened = false;
     }
 
+    /** @private */
+    _initOverlay() {
+      const overlay = this.$.overlay;
+
+      // Store instance for detecting "dir" attribute on opening
+      overlay._comboBox = this;
+
+      overlay.addEventListener('touchend', this._boundOnOverlayTouchAction);
+      overlay.addEventListener('touchmove', this._boundOnOverlayTouchAction);
+
+      // Prevent blurring the input when clicking inside the overlay
+      overlay.addEventListener('mousedown', (e) => e.preventDefault());
+
+      // Preventing the default modal behavior of the overlay on input click
+      overlay.addEventListener('vaadin-overlay-outside-click', (e) => {
+        e.preventDefault();
+      });
+
+      // Manual two-way binding for the overlay "opened" property
+      overlay.addEventListener('opened-changed', (e) => {
+        this._overlayOpened = e.detail.value;
+      });
+    }
+
+    /**
+     * Create and initialize the scroller element.
+     * Override to provide custom host reference.
+     *
+     * @protected
+     */
+    _initScroller(host) {
+      const scrollerTag = `${this._tagNamePrefix}-scroller`;
+
+      const overlay = this.$.overlay;
+
+      overlay.renderer = (root) => {
+        if (!root.firstChild) {
+          root.appendChild(document.createElement(scrollerTag));
+        }
+      };
+
+      // Ensure the scroller is rendered
+      if (!this.opened) {
+        overlay.requestContentUpdate();
+      }
+
+      const scroller = overlay.querySelector(scrollerTag);
+
+      scroller.comboBox = host || this;
+      scroller.getItemLabel = this._getItemLabel.bind(this);
+      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
+
+      // Trigger the observer to set properties
+      this._scroller = scroller;
+    }
+
+    /** @private */
+    // eslint-disable-next-line max-params
+    _updateScroller(scroller, items, opened, loading, selectedItem, itemIdPath, focusedIndex, renderer, theme) {
+      if (scroller) {
+        if (opened) {
+          scroller.style.maxHeight =
+            getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
+        }
+
+        scroller.setProperties({
+          items: opened ? items : [],
+          opened,
+          loading,
+          selectedItem,
+          itemIdPath,
+          focusedIndex,
+          renderer,
+          theme,
+        });
+      }
+    }
+
+    /** @protected */
+    _isOverlayHidden(items, loading) {
+      return !loading && !(items && items.length);
+    }
+
+    /** @private */
+    _openedOrItemsChanged(opened, items, loading) {
+      // Close the overlay if there are no items to display.
+      // See https://github.com/vaadin/vaadin-combo-box/pull/964
+      this._overlayOpened = !!(opened && (loading || (items && items.length)));
+    }
+
+    /** @private */
+    _overlayOpenedChanged(opened, wasOpened) {
+      if (opened) {
+        this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
+
+        this._onOpened();
+      } else if (wasOpened && this.filteredItems && this.filteredItems.length) {
+        this.close();
+
+        this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
+      }
+    }
+
     /** @private */
     _focusedIndexChanged(index, oldIndex) {
       if (oldIndex === undefined) {
@@ -375,7 +523,7 @@ export const ComboBoxMixin = (subclass) =>
           this.focus();
         }
 
-        this.__restoreFocusOnClose = true;
+        this.$.overlay.restoreFocusOnClose = true;
       } else {
         this._onClosed();
         if (this._openedWithFocusRing && this.hasAttribute('focused')) {
@@ -388,7 +536,7 @@ export const ComboBoxMixin = (subclass) =>
         input.setAttribute('aria-expanded', !!opened);
 
         if (opened) {
-          input.setAttribute('aria-controls', this.$.dropdown.scrollerId);
+          input.setAttribute('aria-controls', this._scroller.id);
         } else {
           input.removeAttribute('aria-controls');
         }
@@ -478,7 +626,7 @@ export const ComboBoxMixin = (subclass) =>
       super._onKeyDown(e);
 
       if (e.key === 'Tab') {
-        this.__restoreFocusOnClose = false;
+        this.$.overlay.restoreFocusOnClose = false;
       } else if (e.key === 'ArrowDown') {
         this._closeOnBlurIsPrevented = true;
         this._onArrowDown();
@@ -498,7 +646,11 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _getItemLabel(item) {
-      return this.$.dropdown.getItemLabel(item);
+      let label = item && this.itemLabelPath ? this.get(this.itemLabelPath, item) : undefined;
+      if (label === undefined || label === null) {
+        label = item ? item.toString() : '';
+      }
+      return label;
     }
 
     /** @private */
@@ -513,7 +665,7 @@ export const ComboBoxMixin = (subclass) =>
     /** @private */
     _onArrowDown() {
       if (this.opened) {
-        const items = this._getOverlayItems();
+        const items = this.filteredItems;
         if (items) {
           this._focusedIndex = Math.min(items.length - 1, this._focusedIndex + 1);
           this._prefillFocusedItemLabel();
@@ -529,7 +681,7 @@ export const ComboBoxMixin = (subclass) =>
         if (this._focusedIndex > -1) {
           this._focusedIndex = Math.max(0, this._focusedIndex - 1);
         } else {
-          const items = this._getOverlayItems();
+          const items = this.filteredItems;
           if (items) {
             this._focusedIndex = items.length - 1;
           }
@@ -544,7 +696,8 @@ export const ComboBoxMixin = (subclass) =>
     /** @private */
     _prefillFocusedItemLabel() {
       if (this._focusedIndex > -1) {
-        this._inputElementValue = this._getItemLabel(this.$.dropdown.focusedItem);
+        const focusedItem = this.filteredItems[this._focusedIndex];
+        this._inputElementValue = this._getItemLabel(focusedItem);
         this._markAllSelectionRange();
       }
     }
@@ -701,7 +854,7 @@ export const ComboBoxMixin = (subclass) =>
     _onOpened() {
       // Defer scroll position adjustment to improve performance.
       requestAnimationFrame(() => {
-        this.$.dropdown.adjustScrollPosition();
+        this._scrollIntoView(this._focusedIndex);
 
         // Set attribute after the items are rendered when overlay is opened for the first time.
         this._updateActiveDescendant(this._focusedIndex);
@@ -720,9 +873,8 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _commitValue() {
-      const items = this._getOverlayItems();
-      if (items && this._focusedIndex > -1) {
-        const focusedItem = items[this._focusedIndex];
+      if (this._focusedIndex > -1) {
+        const focusedItem = this.filteredItems[this._focusedIndex];
         if (this.selectedItem !== focusedItem) {
           this.selectedItem = focusedItem;
         }
@@ -735,18 +887,14 @@ export const ComboBoxMixin = (subclass) =>
           this.value = '';
         }
       } else {
-        const toLowerCase = (item) => item && item.toLowerCase && item.toLowerCase();
-
-        // Try to find an item whose label matches the input value. A matching item is searched from
-        // the filteredItems array (if available) and the selectedItem (if available).
-        const itemMatchingByLabel = [...(this.filteredItems || []), this.selectedItem].find((item) => {
-          return toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue);
-        });
+        // Try to find an item which label matches the input value.
+        const items = [...(this.filteredItems || []), this.selectedItem];
+        const itemMatchingInputValue = items[this.__getItemIndexByLabel(items, this._inputElementValue)];
 
         if (
           this.allowCustomValue &&
           // To prevent a repetitive input value being saved after pressing ESC and Tab.
-          !itemMatchingByLabel
+          !itemMatchingInputValue
         ) {
           const customValue = this._inputElementValue;
 
@@ -763,12 +911,11 @@ export const ComboBoxMixin = (subclass) =>
           });
           this.dispatchEvent(e);
           if (!e.defaultPrevented) {
-            this._selectItemForValue(customValue);
             this.value = customValue;
           }
-        } else if (!this.allowCustomValue && !this.opened && itemMatchingByLabel) {
+        } else if (!this.allowCustomValue && !this.opened && itemMatchingInputValue) {
           // An item matching by label was found, select it.
-          this.value = this._getItemValue(itemMatchingByLabel);
+          this.value = this._getItemValue(itemMatchingInputValue);
         } else {
           // Revert the input value
           this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : this.value || '';
@@ -834,13 +981,15 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /** @private */
-    _filterChanged(filter, itemValuePath, itemLabelPath) {
+    _filterChanged(filter, _itemValuePath, _itemLabelPath) {
       if (filter === undefined) {
         return;
       }
 
       // Scroll to the top of the list whenever the filter changes.
-      this.$.dropdown._scrollIntoView(0);
+      this._scrollIntoView(0);
+
+      this._focusedIndex = -1;
 
       if (this.items) {
         this.filteredItems = this._filterItems(this.items, filter);
@@ -848,14 +997,7 @@ export const ComboBoxMixin = (subclass) =>
         // With certain use cases (e. g., external filtering), `items` are
         // undefined. Filtering is unnecessary per se, but the filteredItems
         // observer should still be invoked to update focused item.
-        this._filteredItemsChanged({ path: 'filteredItems', value: this.filteredItems }, itemValuePath, itemLabelPath);
-      }
-    }
-
-    /** @private */
-    _loadingChanged(loading) {
-      if (loading) {
-        this._focusedIndex = -1;
+        this._filteredItemsChanged(this.filteredItems);
       }
     }
 
@@ -904,9 +1046,7 @@ export const ComboBoxMixin = (subclass) =>
         this._inputElementValue = this._getItemLabel(selectedItem);
       }
 
-      this.$.dropdown._selectedItem = selectedItem;
-      const items = this._getOverlayItems();
-      if (this.filteredItems && items) {
+      if (this.filteredItems) {
         this._focusedIndex = this.filteredItems.indexOf(selectedItem);
       }
     }
@@ -923,7 +1063,7 @@ export const ComboBoxMixin = (subclass) =>
         return;
       }
 
-      if (this._isValidValue(value)) {
+      if (isValidValue(value)) {
         let item;
         if (this._getItemValue(this.selectedItem) !== value) {
           this._selectItemForValue(value);
@@ -956,53 +1096,53 @@ export const ComboBoxMixin = (subclass) =>
       this._ensureItemsOrDataProvider(() => {
         this.items = oldItems;
       });
+
+      if (items) {
+        this.filteredItems = items.slice(0);
+      } else if (oldItems) {
+        // Only clear filteredItems if the component had items previously but got cleared
+        this.filteredItems = null;
+      }
     }
 
     /** @private */
-    _itemsOrPathsChanged(e) {
-      if (e.path === 'items' || e.path === 'items.splices') {
-        if (this.items) {
-          this.filteredItems = this.items.slice(0);
-        } else if (this.__previousItems) {
-          // Only clear filteredItems if the component had items previously but got cleared
-          this.filteredItems = null;
-        }
-
-        const valueIndex = this._indexOfValue(this.value, this.items);
-        this._focusedIndex = valueIndex;
+    _filteredItemsChanged(filteredItems, oldFilteredItems) {
+      // Store the currently focused item if any. The focused index preserves
+      // in the case when more filtered items are loading but it is reset
+      // when the user types in a filter query.
+      const focusedItem = oldFilteredItems ? oldFilteredItems[this._focusedIndex] : null;
+
+      // Try to sync `selectedItem` based on `value` once a new set of `filteredItems` is available
+      // (as a result of external filtering or when they have been loaded by the data provider).
+      // When `value` is specified but `selectedItem` is not, it means that there was no item
+      // matching `value` at the moment `value` was set, so `selectedItem` has remained unsynced.
+      const valueIndex = this.__getItemIndexByValue(filteredItems, this.value);
+      if ((this.selectedItem === null || this.selectedItem === undefined) && valueIndex >= 0) {
+        this.selectedItem = filteredItems[valueIndex];
+      }
 
-        const item = valueIndex > -1 && this.items[valueIndex];
-        if (item) {
-          this.selectedItem = item;
-        }
+      // Try to first set focus on the item that had been focused before `filteredItems` were updated
+      // if it is still present in the `filteredItems` array. Otherwise, set the focused index
+      // depending on the selected item or the filter query.
+      const focusedItemIndex = this.__getItemIndexByValue(filteredItems, this._getItemValue(focusedItem));
+      if (focusedItemIndex > -1) {
+        this._focusedIndex = focusedItemIndex;
+      } else {
+        this.__setInitialFocusedIndex();
       }
-      this.__previousItems = e.value;
     }
 
     /** @private */
-    _filteredItemsChanged(e) {
-      if (e.path === 'filteredItems' || e.path === 'filteredItems.splices') {
-        this._setOverlayItems(this.filteredItems);
-
-        // When the external filtering is used and `value` was provided before `filteredItems`,
-        // initialize the selected item with the current value here. This will also cause
-        // the input element value to sync. In other cases, the selected item is already initialized
-        // in other observers such as `valueChanged`, `_itemsOrPathsChanged`.
-        const valueIndex = this._indexOfValue(this.value, this.filteredItems);
-        if (this.selectedItem === null && valueIndex >= 0) {
-          this._selectItemForValue(this.value);
-        }
-
-        const inputValue = this._inputElementValue;
-        if (inputValue === undefined || inputValue === this._getItemLabel(this.selectedItem)) {
-          // When the input element value is the same as the current value or not defined,
-          // set the focused index to the item that matches the value.
-          this._focusedIndex = this.$.dropdown.indexOfLabel(this._getItemLabel(this.selectedItem));
-        } else {
-          // When the user filled in something that is different from the current value = filtering is enabled,
-          // set the focused index to the item that matches the filter query.
-          this._focusedIndex = this.$.dropdown.indexOfLabel(this.filter);
-        }
+    __setInitialFocusedIndex() {
+      const inputValue = this._inputElementValue;
+      if (inputValue === undefined || inputValue === this._getItemLabel(this.selectedItem)) {
+        // When the input element value is the same as the current value or not defined,
+        // set the focused index to the item that matches the value.
+        this._focusedIndex = this.__getItemIndexByLabel(this.filteredItems, this._getItemLabel(this.selectedItem));
+      } else {
+        // When the user filled in something that is different from the current value = filtering is enabled,
+        // set the focused index to the item that matches the filter query.
+        this._focusedIndex = this.__getItemIndexByLabel(this.filteredItems, this.filter);
       }
     }
 
@@ -1023,7 +1163,7 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _selectItemForValue(value) {
-      const valueIndex = this._indexOfValue(value, this.filteredItems);
+      const valueIndex = this.__getItemIndexByValue(this.filteredItems, value);
       const previouslySelectedItem = this.selectedItem;
 
       if (valueIndex >= 0) {
@@ -1039,42 +1179,48 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /** @protected */
-    _getItemElements() {
-      return Array.from(this.$.dropdown._scroller.querySelectorAll('vaadin-combo-box-item'));
-    }
-
     /** @private */
-    _getOverlayItems() {
-      return this.$.dropdown._items;
+    _getItemElements() {
+      return Array.from(this._scroller.querySelectorAll(`${this._tagNamePrefix}-item`));
     }
 
     /** @private */
-    _setOverlayItems(items) {
-      this.$.dropdown.set('_items', items);
+    _scrollIntoView(index) {
+      if (!this._scroller) {
+        return;
+      }
+      this._scroller.scrollIntoView(index);
     }
 
-    /** @private */
-    _indexOfValue(value, items) {
-      if (!items || !this._isValidValue(value)) {
+    /**
+     * Returns the first item that matches the provided value.
+     *
+     * @private
+     */
+    __getItemIndexByValue(items, value) {
+      if (!items || !isValidValue(value)) {
         return -1;
       }
 
-      return items.findIndex((item) => {
-        if (item instanceof ComboBoxPlaceholder) {
-          return false;
-        }
-
+      return findItemIndex(items, (item) => {
         return this._getItemValue(item) === value;
       });
     }
 
     /**
-     * Checks if the value is supported as an item value in this control.
+     * Returns the first item that matches the provided label.
+     * Labels are matched against each other case insensitively.
+     *
      * @private
      */
-    _isValidValue(value) {
-      return value !== undefined && value !== null;
+    __getItemIndexByLabel(items, label) {
+      if (!items || !label) {
+        return -1;
+      }
+
+      return findItemIndex(items, (item) => {
+        return this._getItemLabel(item).toString().toLowerCase() === label.toString().toLowerCase();
+      });
     }
 
     /** @private */
@@ -1105,7 +1251,7 @@ export const ComboBoxMixin = (subclass) =>
     /** @private */
     _onFocusout(event) {
       // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
-      if (event.relatedTarget === this.$.dropdown.$.overlay) {
+      if (event.relatedTarget === this.$.overlay) {
         event.composedPath()[0].focus();
         return;
       }
@@ -1181,4 +1327,16 @@ export const ComboBoxMixin = (subclass) =>
      * To comply with https://developer.mozilla.org/en-US/docs/Web/Events/change
      * @event change
      */
+
+    /**
+     * Fired after the `vaadin-combo-box-overlay` opens.
+     *
+     * @event vaadin-combo-box-dropdown-opened
+     */
+
+    /**
+     * Fired after the `vaadin-combo-box-overlay` closes.
+     *
+     * @event vaadin-combo-box-dropdown-closed
+     */
   };

package/src/vaadin-combo-box-overlay.js

@@ -52,9 +52,7 @@ export class ComboBoxOverlay extends PositionMixin(OverlayElement) {
   connectedCallback() {
     super.connectedCallback();
 
-    const dropdown = this.__dataHost;
-    const comboBox = dropdown && dropdown.getRootNode().host;
-    this._comboBox = comboBox;
+    const comboBox = this._comboBox;
 
     const hostDir = comboBox && comboBox.getAttribute('dir');
     if (hostDir) {

package/src/vaadin-combo-box-scroller.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
@@ -90,6 +91,7 @@ export class ComboBoxScroller extends PolymerElement {
        */
       selectedItem: {
         type: Object,
+        observer: '__selectedItemChanged',
       },
 
       /**
@@ -145,6 +147,9 @@ export class ComboBoxScroller extends PolymerElement {
   ready() {
     super.ready();
 
+    // Ensure every instance has unique ID
+    this.id = `${this.localName}-${generateUniqueId()}`;
+
     // Allow extensions to customize tag name for the items
     this.__hostTagName = this.constructor.is.replace('-scroller', '');
 
@@ -218,7 +223,7 @@ export class ComboBoxScroller extends PolymerElement {
 
   /** @private */
   __isItemFocused(focusedIndex, itemIndex) {
-    return focusedIndex === itemIndex;
+    return !this.loading && focusedIndex === itemIndex;
   }
 
   /** @private */
@@ -243,12 +248,19 @@ export class ComboBoxScroller extends PolymerElement {
   }
 
   /** @private */
-  __loadingChanged(loading) {
-    if (this.__virtualizer && !loading) {
+  __loadingChanged() {
+    if (this.__virtualizer) {
       setTimeout(() => this.requestContentUpdate());
     }
   }
 
+  /** @private */
+  __selectedItemChanged() {
+    if (this.__virtualizer) {
+      this.requestContentUpdate();
+    }
+  }
+
   /** @private */
   __focusedIndexChanged(index, oldIndex) {
     if (!this.__virtualizer) {

package/src/vaadin-combo-box.js

@@ -4,7 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
-import './vaadin-combo-box-dropdown.js';
+import './vaadin-combo-box-item.js';
+import './vaadin-combo-box-overlay.js';
+import './vaadin-combo-box-scroller.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
@@ -196,19 +198,16 @@ class ComboBox extends ComboBoxDataProviderMixin(
         </div>
       </div>
 
-      <vaadin-combo-box-dropdown
-        id="dropdown"
-        opened="[[opened]]"
-        renderer="[[renderer]]"
+      <vaadin-combo-box-overlay
+        id="overlay"
+        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
+        opened="[[_overlayOpened]]"
+        loading$="[[loading]]"
+        theme$="[[_theme]]"
         position-target="[[_positionTarget]]"
-        restore-focus-on-close="[[__restoreFocusOnClose]]"
+        no-vertical-overlap
         restore-focus-node="[[inputElement]]"
-        _focused-index="[[_focusedIndex]]"
-        _item-id-path="[[itemIdPath]]"
-        _item-label-path="[[itemLabelPath]]"
-        loading="[[loading]]"
-        theme="[[_theme]]"
-      ></vaadin-combo-box-dropdown>
+      ></vaadin-combo-box-overlay>
     `;
   }
 
@@ -273,7 +272,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
    */
   _shouldRemoveFocus(event) {
     // Do not blur when focus moves to the overlay
-    if (event.relatedTarget === this.$.dropdown.$.overlay) {
+    if (event.relatedTarget === this.$.overlay) {
       event.composedPath()[0].focus();
       return false;
     }

package/src/vaadin-combo-box-dropdown.js

@@ -1,287 +0,0 @@
-/**
- * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-combo-box-item.js';
-import './vaadin-combo-box-overlay.js';
-import './vaadin-combo-box-scroller.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-
-/**
- * Element for internal use only.
- *
- * @extends HTMLElement
- * @private
- */
-export class ComboBoxDropdown extends PolymerElement {
-  static get is() {
-    return 'vaadin-combo-box-dropdown';
-  }
-
-  static get template() {
-    return html`
-      <vaadin-combo-box-overlay
-        id="overlay"
-        hidden$="[[_isOverlayHidden(_items.*, loading)]]"
-        loading$="[[loading]]"
-        opened="{{_overlayOpened}}"
-        theme$="[[theme]]"
-        position-target="[[positionTarget]]"
-        no-vertical-overlap
-        restore-focus-on-close="[[restoreFocusOnClose]]"
-        restore-focus-node="[[restoreFocusNode]]"
-      ></vaadin-combo-box-overlay>
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * True if the combo-box has been activate by the user.
-       * The actual opened state depends on whether the dropdown has items.
-       */
-      opened: Boolean,
-
-      /**
-       * The element to position/align the dropdown by.
-       */
-      positionTarget: {
-        type: Object,
-      },
-
-      /**
-       * Custom function for rendering the content of the `<vaadin-combo-box-item>` propagated from the combo box element.
-       */
-      renderer: Function,
-
-      /**
-       * `true` when new items are being loaded.
-       */
-      loading: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Used to propagate the `theme` attribute from the host element.
-       */
-      theme: String,
-
-      _selectedItem: {
-        type: Object,
-      },
-
-      _items: {
-        type: Array,
-      },
-
-      _focusedIndex: {
-        type: Number,
-        value: -1,
-      },
-
-      focusedItem: {
-        type: String,
-        computed: '_getFocusedItem(_focusedIndex)',
-      },
-
-      _itemLabelPath: {
-        type: String,
-        value: 'label',
-      },
-
-      _itemValuePath: {
-        type: String,
-        value: 'value',
-      },
-
-      _scroller: Object,
-
-      _itemIdPath: String,
-
-      _overlayOpened: {
-        type: Boolean,
-        observer: '_openedChanged',
-      },
-    };
-  }
-
-  static get observers() {
-    return [
-      '_openedOrItemsChanged(opened, _items, loading)',
-      '__updateScroller(_scroller, _items, opened, loading, _selectedItem, _itemIdPath, _focusedIndex, renderer, theme)',
-    ];
-  }
-
-  constructor() {
-    super();
-
-    // Ensure every instance has unique ID
-    const uniqueId = (ComboBoxDropdown._uniqueId = 1 + ComboBoxDropdown._uniqueId || 0);
-    this.scrollerId = `${this.localName}-scroller-${uniqueId}`;
-  }
-
-  ready() {
-    super.ready();
-
-    // Allow extensions to customize tag name for the items
-    this.__hostTagName = this.constructor.is.replace('-dropdown', '');
-
-    const overlay = this.$.overlay;
-    const scrollerTag = `${this.__hostTagName}-scroller`;
-
-    overlay.renderer = (root) => {
-      if (!root.firstChild) {
-        const scroller = document.createElement(scrollerTag);
-        root.appendChild(scroller);
-      }
-    };
-
-    // Ensure the scroller is rendered
-    overlay.requestContentUpdate();
-
-    this._scroller = overlay.content.querySelector(scrollerTag);
-    this._scroller.id = this.scrollerId;
-
-    this._scroller.getItemLabel = this.getItemLabel.bind(this);
-    this._scroller.comboBox = this.getRootNode().host;
-
-    this._scroller.addEventListener('selection-changed', (e) => this._forwardScrollerEvent(e));
-    this._scroller.addEventListener('index-requested', (e) => this._forwardScrollerEvent(e));
-
-    overlay.addEventListener('touchend', (e) => this._fireTouchAction(e));
-    overlay.addEventListener('touchmove', (e) => this._fireTouchAction(e));
-
-    // Prevent blurring the input when clicking inside the overlay.
-    overlay.addEventListener('mousedown', (e) => e.preventDefault());
-
-    // Preventing the default modal behaviour of the overlay on input clicking
-    overlay.addEventListener('vaadin-overlay-outside-click', (e) => {
-      e.preventDefault();
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    // Making sure the overlay is closed and removed from DOM after detaching the dropdown.
-    this._overlayOpened = false;
-  }
-
-  _fireTouchAction(sourceEvent) {
-    this.dispatchEvent(
-      new CustomEvent('vaadin-overlay-touch-action', {
-        detail: { sourceEvent },
-      }),
-    );
-  }
-
-  _forwardScrollerEvent(event) {
-    this.dispatchEvent(new CustomEvent(event.type, { detail: event.detail }));
-  }
-
-  _openedChanged(opened, wasOpened) {
-    if (opened) {
-      this._scroller.style.maxHeight =
-        getComputedStyle(this).getPropertyValue(`--${this.__hostTagName}-overlay-max-height`) || '65vh';
-
-      this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
-    } else if (wasOpened && !this.__emptyItems) {
-      this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
-    }
-  }
-
-  _openedOrItemsChanged(opened, items, loading) {
-    // See https://github.com/vaadin/vaadin-combo-box/pull/964
-    const hasItems = items && items.length;
-    if (!hasItems) {
-      this.__emptyItems = true;
-    }
-    this._overlayOpened = !!(opened && (loading || hasItems));
-    this.__emptyItems = false;
-  }
-
-  _getFocusedItem(focusedIndex) {
-    if (focusedIndex >= 0) {
-      return this._items[focusedIndex];
-    }
-  }
-
-  /**
-   * Gets the index of the item with the provided label.
-   * @return {number}
-   */
-  indexOfLabel(label) {
-    if (this._items && label) {
-      for (let i = 0; i < this._items.length; i++) {
-        if (this.getItemLabel(this._items[i]).toString().toLowerCase() === label.toString().toLowerCase()) {
-          return i;
-        }
-      }
-    }
-
-    return -1;
-  }
-
-  /**
-   * Gets the label string for the item based on the `_itemLabelPath`.
-   * @return {string}
-   */
-  getItemLabel(item, itemLabelPath) {
-    itemLabelPath = itemLabelPath || this._itemLabelPath;
-    let label = item && itemLabelPath ? this.get(itemLabelPath, item) : undefined;
-    if (label === undefined || label === null) {
-      label = item ? item.toString() : '';
-    }
-    return label;
-  }
-
-  _scrollIntoView(index) {
-    if (!this._scroller) {
-      return;
-    }
-    this._scroller.scrollIntoView(index);
-  }
-
-  adjustScrollPosition() {
-    if (this.opened && this._items) {
-      this._scrollIntoView(this._focusedIndex);
-    }
-  }
-
-  // eslint-disable-next-line max-params
-  __updateScroller(scroller, items, opened, loading, selectedItem, itemIdPath, focusedIndex, renderer, theme) {
-    if (scroller) {
-      scroller.setProperties({
-        items: opened ? items : [],
-        opened,
-        loading,
-        selectedItem,
-        itemIdPath,
-        focusedIndex,
-        renderer,
-        theme,
-      });
-    }
-  }
-
-  _isOverlayHidden() {
-    return !this.loading && !(this._items && this._items.length);
-  }
-
-  /**
-   * Fired after the `vaadin-combo-box-dropdown` opens.
-   *
-   * @event vaadin-combo-box-dropdown-opened
-   */
-
-  /**
-   * Fired after the `vaadin-combo-box-dropdown` closes.
-   *
-   * @event vaadin-combo-box-dropdown-closed
-   */
-}
-
-customElements.define(ComboBoxDropdown.is, ComboBoxDropdown);