@vaadin/combo-box 25.0.0-alpha8 → 25.0.0-alpha9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "25.0.0-alpha8",
+  "version": "25.0.0-alpha9",
   "publishConfig": {
     "access": "public"
   },
@@ -38,20 +38,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha8",
-    "@vaadin/component-base": "25.0.0-alpha8",
-    "@vaadin/field-base": "25.0.0-alpha8",
-    "@vaadin/input-container": "25.0.0-alpha8",
-    "@vaadin/item": "25.0.0-alpha8",
-    "@vaadin/lit-renderer": "25.0.0-alpha8",
-    "@vaadin/overlay": "25.0.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-alpha9",
+    "@vaadin/component-base": "25.0.0-alpha9",
+    "@vaadin/field-base": "25.0.0-alpha9",
+    "@vaadin/input-container": "25.0.0-alpha9",
+    "@vaadin/item": "25.0.0-alpha9",
+    "@vaadin/lit-renderer": "25.0.0-alpha9",
+    "@vaadin/overlay": "25.0.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha8",
-    "@vaadin/test-runner-commands": "25.0.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-alpha9",
+    "@vaadin/test-runner-commands": "25.0.0-alpha9",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

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

@@ -184,15 +184,6 @@ export const ComboBoxBaseMixin = (superClass) =>
         this.clearElement.addEventListener('mousedown', this._boundOnClearButtonMouseDown);
       }
 
-      const bringToFrontListener = () => {
-        requestAnimationFrame(() => {
-          this._overlayElement.bringToFront();
-        });
-      };
-
-      this.addEventListener('mousedown', bringToFrontListener);
-      this.addEventListener('touchstart', bringToFrontListener);
-
       this.addController(new VirtualKeyboardController(this));
     }
 
@@ -241,14 +232,13 @@ export const ComboBoxBaseMixin = (superClass) =>
 
     /**
      * Create and initialize the scroller element.
-     * Override to provide custom host reference.
      *
-     * @protected
+     * @private
      */
-    _initScroller(host) {
+    _initScroller() {
       const scroller = document.createElement(`${this._tagNamePrefix}-scroller`);
 
-      scroller.owner = host || this;
+      scroller.owner = this;
       scroller.getItemLabel = this._getItemLabel.bind(this);
       scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
 
@@ -259,21 +249,14 @@ export const ComboBoxBaseMixin = (superClass) =>
 
     /**
      * Render the scroller element to the overlay.
-     * Override to provide custom logic (e.g. setting "slot").
      *
-     * @protected
+     * @private
      */
     _renderScroller(scroller) {
-      const overlay = this.$.overlay;
-
-      overlay.renderer = (root) => {
-        if (!root.innerHTML) {
-          root.appendChild(scroller);
-        }
-      };
-
-      // Ensure the scroller is rendered
-      overlay.requestContentUpdate();
+      scroller.setAttribute('slot', 'overlay');
+      // Prevent focusing scroller on input Tab
+      scroller.setAttribute('tabindex', '-1');
+      this.appendChild(scroller);
     }
 
     /**

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

@@ -58,11 +58,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     }
 
     static get observers() {
-      return [
-        '_dataProviderFilterChanged(filter)',
-        '_warnDataProviderValue(dataProvider, value)',
-        '_ensureFirstPage(opened)',
-      ];
+      return ['_dataProviderFilterChanged(filter)', '_ensureFirstPage(opened)'];
     }
 
     constructor() {
@@ -283,20 +279,4 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         throw new Error('Using `items` and `dataProvider` together is not supported');
       }
     }
-
-    /** @private */
-    _warnDataProviderValue(dataProvider, value) {
-      if (dataProvider && value !== '' && (this.selectedItem === undefined || this.selectedItem === null)) {
-        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`. ' +
-              'Nothing to display in the text field. This usually happens when ' +
-              'setting an initial `value` before any items are returned from ' +
-              'the `dataProvider` callback. Consider setting `selectedItem` ' +
-              'instead of `value`',
-          );
-        }
-      }
-    }
   };

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

@@ -92,7 +92,7 @@ export const ComboBoxItemMixin = (superClass) =>
 
     /** @protected */
     _getHostDir() {
-      return this._owner && this._owner.getAttribute('dir');
+      return this._owner && this._owner.$.overlay.getAttribute('dir');
     }
 
     /**

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

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ComboBoxBaseMixinClass } from './vaadin-combo-box-base-mixin.js';
+
+export declare function ComboBoxItemsMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ComboBoxBaseMixinClass> & Constructor<ComboBoxItemsMixinClass<TItem>> & T;
+
+export declare class ComboBoxItemsMixinClass<TItem> {
+  /**
+   * A full set of items to filter the visible options from.
+   * The items can be of either `String` or `Object` type.
+   */
+  items: TItem[] | undefined;
+
+  /**
+   * A subset of items, filtered based on the user input. Filtered items
+   * can be assigned directly to omit the internal filtering functionality.
+   * The items can be of either `String` or `Object` type.
+   */
+  filteredItems: TItem[] | undefined;
+
+  /**
+   * Filtering string the user has typed into the input field.
+   */
+  filter: string;
+
+  /**
+   * Path for label of the item. If `items` is an array of objects, the
+   * `itemLabelPath` is used to fetch the displayed string label for each
+   * item.
+   *
+   * The item label is also used for matching items when processing user
+   * input, i.e., for filtering and selecting items.
+   * @attr {string} item-label-path
+   */
+  itemLabelPath: string;
+
+  /**
+   * Path for the value of the item. If `items` is an array of objects, the
+   * `itemValuePath:` is used to fetch the string value for the selected
+   * item.
+   *
+   * The item value is used in the `value` property of the combo box,
+   * to provide the form value.
+   * @attr {string} item-value-path
+   */
+  itemValuePath: string;
+}

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

@@ -0,0 +1,275 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { get } from '@vaadin/component-base/src/path-utils.js';
+import { ComboBoxBaseMixin } from './vaadin-combo-box-base-mixin.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
+ * @mixes ComboBoxBaseMixin
+ */
+export const ComboBoxItemsMixin = (superClass) =>
+  class ComboBoxItemsMixinClass extends ComboBoxBaseMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * A full set of items to filter the visible options from.
+         * The items can be of either `String` or `Object` type.
+         * @type {!Array<!ComboBoxItem | string> | undefined}
+         */
+        items: {
+          type: Array,
+          sync: true,
+          observer: '_itemsChanged',
+        },
+
+        /**
+         * A subset of items, filtered based on the user input. Filtered items
+         * can be assigned directly to omit the internal filtering functionality.
+         * The items can be of either `String` or `Object` type.
+         * @type {!Array<!ComboBoxItem | string> | undefined}
+         */
+        filteredItems: {
+          type: Array,
+          observer: '_filteredItemsChanged',
+          sync: true,
+        },
+
+        /**
+         * Filtering string the user has typed into the input field.
+         * @type {string}
+         */
+        filter: {
+          type: String,
+          value: '',
+          notify: true,
+          sync: true,
+        },
+
+        /**
+         * Path for label of the item. If `items` is an array of objects, the
+         * `itemLabelPath` is used to fetch the displayed string label for each
+         * item.
+         *
+         * The item label is also used for matching items when processing user
+         * input, i.e., for filtering and selecting items.
+         * @attr {string} item-label-path
+         * @type {string}
+         */
+        itemLabelPath: {
+          type: String,
+          value: 'label',
+          observer: '_itemLabelPathChanged',
+          sync: true,
+        },
+
+        /**
+         * Path for the value of the item. If `items` is an array of objects, the
+         * `itemValuePath:` is used to fetch the string value for the selected
+         * item.
+         *
+         * The item value is used in the `value` property of the combo box,
+         * to provide the form value.
+         * @attr {string} item-value-path
+         * @type {string}
+         */
+        itemValuePath: {
+          type: String,
+          value: 'value',
+          sync: true,
+        },
+      };
+    }
+
+    /**
+     * @param {Object} props
+     * @protected
+     */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('filter')) {
+        this._filterChanged(this.filter);
+      }
+    }
+
+    /**
+     * Override an event listener from `ComboBoxBaseMixin` to handle
+     * batched setting of both `opened` and `filter` properties.
+     * @param {!Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      const filter = this._inputElementValue;
+
+      // When opening dropdown on user input, both `opened` and `filter` properties are set.
+      // Perform a batched property update instead of relying on sync property observers.
+      // This is necessary to avoid an extra data-provider request for loading first page.
+      const props = {};
+
+      if (this.filter === filter) {
+        // Filter and input value might get out of sync, while keyboard navigating for example.
+        // Afterwards, input value might be changed to the same value as used in filtering.
+        // In situation like these, we need to make sure all the filter changes handlers are run.
+        this._filterChanged(this.filter);
+      } else {
+        props.filter = filter;
+      }
+
+      if (!this.opened && !this._isClearButton(event) && !this.autoOpenDisabled) {
+        props.opened = true;
+      }
+
+      this.setProperties(props);
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to handle item label path.
+     * @protected
+     * @override
+     */
+    _getItemLabel(item) {
+      let label = item && this.itemLabelPath ? get(this.itemLabelPath, item) : undefined;
+      if (label === undefined || label === null) {
+        label = item ? item.toString() : '';
+      }
+      return label;
+    }
+
+    /** @protected */
+    _getItemValue(item) {
+      let value = item && this.itemValuePath ? get(this.itemValuePath, item) : undefined;
+      if (value === undefined) {
+        value = item ? item.toString() : '';
+      }
+      return value;
+    }
+
+    /** @private */
+    _itemLabelPathChanged(itemLabelPath) {
+      if (typeof itemLabelPath !== 'string') {
+        console.error('You should set itemLabelPath to a valid string');
+      }
+    }
+
+    /** @private */
+    _filterChanged(filter) {
+      // Scroll to the top of the list whenever the filter changes.
+      this._scrollIntoView(0);
+
+      this._focusedIndex = -1;
+
+      if (this.items) {
+        this.filteredItems = this._filterItems(this.items, filter);
+      } else {
+        // 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(this.filteredItems);
+      }
+    }
+
+    /** @private */
+    _itemsChanged(items, oldItems) {
+      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 */
+    _filteredItemsChanged(filteredItems) {
+      this._setDropdownItems(filteredItems);
+    }
+
+    /**
+     * Provide items to be rendered in the dropdown.
+     * Override to provide actual implementation.
+     * @protected
+     */
+    _setDropdownItems() {
+      // To be implemented
+    }
+
+    /** @private */
+    _filterItems(arr, filter) {
+      if (!arr) {
+        return arr;
+      }
+
+      const filteredItems = arr.filter((item) => {
+        filter = filter ? filter.toString().toLowerCase() : '';
+        // Check if item contains input value.
+        return this._getItemLabel(item).toString().toLowerCase().indexOf(filter) > -1;
+      });
+
+      return filteredItems;
+    }
+
+    /**
+     * Returns the first item that matches the provided value.
+     * @protected
+     */
+    __getItemIndexByValue(items, value) {
+      if (!items || !isValidValue(value)) {
+        return -1;
+      }
+
+      return findItemIndex(items, (item) => {
+        return this._getItemValue(item) === value;
+      });
+    }
+
+    /**
+     * Returns the first item that matches the provided label.
+     * Labels are matched against each other case insensitively.
+     * @protected
+     */
+    __getItemIndexByLabel(items, label) {
+      if (!items || !label) {
+        return -1;
+      }
+
+      return findItemIndex(items, (item) => {
+        return this._getItemLabel(item).toString().toLowerCase() === label.toString().toLowerCase();
+      });
+    }
+  };

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

@@ -44,12 +44,6 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   renderer: ComboBoxRenderer<TItem> | null | undefined;
 
-  /**
-   * A full set of items to filter the visible options from.
-   * The items can be of either `String` or `Object` type.
-   */
-  items: TItem[] | undefined;
-
   /**
    * A function used to generate CSS class names for dropdown
    * items based on the item. The return value should be the
@@ -67,13 +61,6 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   allowCustomValue: boolean;
 
-  /**
-   * A subset of items, filtered based on the user input. Filtered items
-   * can be assigned directly to omit the internal filtering functionality.
-   * The items can be of either `String` or `Object` type.
-   */
-  filteredItems: TItem[] | undefined;
-
   /**
    * The `String` value for the selected item of the combo box.
    *
@@ -89,38 +76,11 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   loading: boolean;
 
-  /**
-   * Filtering string the user has typed into the input field.
-   */
-  filter: string;
-
   /**
    * The selected item from the `items` array.
    */
   selectedItem: TItem | null | undefined;
 
-  /**
-   * Path for label of the item. If `items` is an array of objects, the
-   * `itemLabelPath` is used to fetch the displayed string label for each
-   * item.
-   *
-   * The item label is also used for matching items when processing user
-   * input, i.e., for filtering and selecting items.
-   * @attr {string} item-label-path
-   */
-  itemLabelPath: string;
-
-  /**
-   * Path for the value of the item. If `items` is an array of objects, the
-   * `itemValuePath:` is used to fetch the string value for the selected
-   * item.
-   *
-   * The item value is used in the `value` property of the combo box,
-   * to provide the form value.
-   * @attr {string} item-value-path
-   */
-  itemValuePath: string;
-
   /**
    * Path for the id of the item. If `items` is an array of objects,
    * the `itemIdPath` is used to compare and identify the same item