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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "25.0.0-alpha7",
+  "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-alpha7",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/field-base": "25.0.0-alpha7",
-    "@vaadin/input-container": "25.0.0-alpha7",
-    "@vaadin/item": "25.0.0-alpha7",
-    "@vaadin/lit-renderer": "25.0.0-alpha7",
-    "@vaadin/overlay": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@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-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@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": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
 }

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

@@ -7,13 +7,11 @@ import '@vaadin/component-base/src/style-props.js';
 import { css } from 'lit';
 
 export const comboBoxStyles = css`
-  @layer base {
-    :host([opened]) {
-      pointer-events: auto;
-    }
+  :host([opened]) {
+    pointer-events: auto;
+  }
 
-    [part='toggle-button']::before {
-      mask-image: var(--_vaadin-icon-chevron-down);
-    }
+  [part='toggle-button']::before {
+    mask-image: var(--_vaadin-icon-chevron-down);
   }
 `;

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

@@ -10,39 +10,37 @@ import { loaderStyles } from '@vaadin/component-base/src/loader-styles.js';
 export const comboBoxOverlayStyles = [
   loaderStyles,
   css`
-    @layer base {
-      :host {
-        --vaadin-item-checkmark-display: block;
-      }
-
-      [part='overlay'] {
-        position: relative;
-        width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
-      }
+    :host {
+      --vaadin-item-checkmark-display: block;
+    }
 
-      [part='content'] {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
+    [part='overlay'] {
+      position: relative;
+      width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+    }
 
-      :host([loading]) [part='content'] {
-        --_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
-      }
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
 
-      @media (forced-colors: active) {
-        [part='loader'] {
-          forced-color-adjust: none;
-          --vaadin-combo-box-spinner-color: CanvasText;
-        }
-      }
+    :host([loading]) [part='content'] {
+      --_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
+    }
 
+    @media (forced-colors: active) {
       [part='loader'] {
-        position: absolute;
-        inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
-        inset-block-end: auto;
-        inset-inline-start: auto;
+        forced-color-adjust: none;
+        --vaadin-combo-box-spinner-color: CanvasText;
       }
     }
+
+    [part='loader'] {
+      position: absolute;
+      inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
+      inset-block-end: auto;
+      inset-inline-start: auto;
+    }
   `,
 ];

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

@@ -6,26 +6,24 @@
 import { css } from 'lit';
 
 export const comboBoxScrollerStyles = css`
-  @layer base {
-    :host {
-      /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-      box-shadow: 0 0 0 white;
-      display: block;
-      min-height: 1px;
-      overflow: auto;
-      /* Fixes item background from getting on top of scrollbars on Safari */
-      transform: translate3d(0, 0, 0);
-    }
+  :host {
+    /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+    box-shadow: 0 0 0 white;
+    display: block;
+    min-height: 1px;
+    overflow: auto;
+    /* Fixes item background from getting on top of scrollbars on Safari */
+    transform: translate3d(0, 0, 0);
+  }
 
-    #selector {
-      border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
-      position: relative;
-      forced-color-adjust: none;
-      min-height: var(--_items-min-height, auto);
-    }
+  #selector {
+    border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
+    position: relative;
+    forced-color-adjust: none;
+    min-height: var(--_items-min-height, auto);
+  }
 
-    #selector > * {
-      forced-color-adjust: auto;
-    }
+  #selector > * {
+    forced-color-adjust: auto;
   }
 `;

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,31 +232,33 @@ 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);
 
-      const overlay = this.$.overlay;
-
-      overlay.renderer = (root) => {
-        if (!root.innerHTML) {
-          root.appendChild(scroller);
-        }
-      };
-
-      // Ensure the scroller is rendered
-      overlay.requestContentUpdate();
+      this._renderScroller(scroller);
 
       this._scroller = scroller;
     }
 
+    /**
+     * Render the scroller element to the overlay.
+     *
+     * @private
+     */
+    _renderScroller(scroller) {
+      scroller.setAttribute('slot', 'overlay');
+      // Prevent focusing scroller on input Tab
+      scroller.setAttribute('tabindex', '-1');
+      this.appendChild(scroller);
+    }
+
     /**
      * @type {boolean}
      * @protected

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-item.js

@@ -40,7 +40,7 @@ import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
  * @private
  */
 export class ComboBoxItem extends ComboBoxItemMixin(
-  LumoInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))),
+  ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-combo-box-item';

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