@vaadin/combo-box 24.8.4 → 25.0.0-alpha10

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

@@ -54,31 +54,32 @@ export const ComboBoxDataProviderMixin = (superClass) =>
           observer: '_dataProviderChanged',
           sync: true,
         },
-
-        /** @private */
-        __dataProviderInitialized: {
-          type: Boolean,
-          value: false,
-        },
-
-        /** @private */
-        __previousDataProviderFilter: {
-          type: String,
-        },
       };
     }
 
     static get observers() {
-      return [
-        '_dataProviderFilterChanged(filter)',
-        '_warnDataProviderValue(dataProvider, value)',
-        '_ensureFirstPage(opened)',
-      ];
+      return ['_dataProviderFilterChanged(filter)', '_ensureFirstPage(opened)'];
     }
 
     constructor() {
       super();
 
+      /**
+       * Flag indicating that data provider has been initialized.
+       * Do not define in `properties` to avoid triggering updates.
+       * @type {boolean}
+       * @protected
+       */
+      this.__dataProviderInitialized = false;
+
+      /**
+       * Used to store the previous value of the data provider filter.
+       * Do not define in `properties` to avoid triggering updates.
+       * @type {string}
+       * @protected
+       */
+      this.__previousDataProviderFilter;
+
       /**
        * @type {DataProviderController}
        * @private
@@ -278,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

@@ -84,12 +84,17 @@ export const ComboBoxItemMixin = (superClass) =>
 
       this._owner = this.parentNode.owner;
 
-      const hostDir = this._owner.getAttribute('dir');
+      const hostDir = this._getHostDir();
       if (hostDir) {
         this.setAttribute('dir', hostDir);
       }
     }
 
+    /** @protected */
+    _getHostDir() {
+      return this._owner && this._owner.$.overlay.getAttribute('dir');
+    }
+
     /**
      * Requests an update for the content of the item.
      * While performing the update, it invokes the renderer passed in the `renderer` property.

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

@@ -3,9 +3,12 @@
  * Copyright (c) 2015 - 2025 Vaadin Ltd.
  * 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 { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { itemStyles } from '@vaadin/item/src/styles/vaadin-item-core-styles.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
 
@@ -36,28 +39,26 @@ import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
  * @mixes DirMixin
  * @private
  */
-export class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
+export class ComboBoxItem extends ComboBoxItemMixin(
+  ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
+  static get is() {
+    return 'vaadin-combo-box-item';
+  }
+
+  static get styles() {
+    return itemStyles;
+  }
 
-        :host([hidden]) {
-          display: none;
-        }
-      </style>
+  /** @protected */
+  render() {
+    return html`
       <span part="checkmark" aria-hidden="true"></span>
       <div part="content">
         <slot></slot>
       </div>
     `;
   }
-
-  static get is() {
-    return 'vaadin-combo-box-item';
-  }
 }
 
 defineCustomElement(ComboBoxItem);

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

@@ -11,6 +11,7 @@ import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ComboBox } from './vaadin-combo-box.js';
+import type { ComboBoxBaseMixinClass } from './vaadin-combo-box-base-mixin.js';
 import type { ComboBoxDefaultItem, ComboBoxItemModel, ComboBoxItemRenderer } from './vaadin-combo-box-item-mixin.js';
 
 export type { ComboBoxDefaultItem, ComboBoxItemModel };
@@ -19,7 +20,8 @@ export type ComboBoxRenderer<TItem> = ComboBoxItemRenderer<TItem, ComboBox<TItem
 
 export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ComboBoxMixinClass<TItem>> &
+): Constructor<ComboBoxBaseMixinClass> &
+  Constructor<ComboBoxMixinClass<TItem>> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
   Constructor<InputMixinClass> &
@@ -29,22 +31,6 @@ export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>
   T;
 
 export declare class ComboBoxMixinClass<TItem> {
-  /**
-   * True if the dropdown is open, false otherwise.
-   */
-  opened: boolean;
-
-  /**
-   * Set true to prevent the overlay from opening automatically.
-   * @attr {boolean} auto-open-disabled
-   */
-  autoOpenDisabled: boolean | null | undefined;
-
-  /**
-   * When present, it specifies that the field is read-only.
-   */
-  readonly: boolean;
-
   /**
    * Custom function for rendering the content of every item.
    * Receives three arguments:
@@ -58,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
@@ -81,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.
    *
@@ -103,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
@@ -144,11 +90,6 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   itemIdPath: string | null | 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.
@@ -156,14 +97,4 @@ export declare class ComboBoxMixinClass<TItem> {
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
    */
   requestContentUpdate(): void;
-
-  /**
-   * Opens the dropdown list.
-   */
-  open(): void;
-
-  /**
-   * Closes the dropdown list.
-   */
-  close(): void;
 }