@vaadin/combo-box 25.2.0-alpha9 → 25.2.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "25.2.0-alpha9",
+  "version": "25.2.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,28 +36,28 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha9",
-    "@vaadin/component-base": "25.2.0-alpha9",
-    "@vaadin/field-base": "25.2.0-alpha9",
-    "@vaadin/input-container": "25.2.0-alpha9",
-    "@vaadin/item": "25.2.0-alpha9",
-    "@vaadin/lit-renderer": "25.2.0-alpha9",
-    "@vaadin/overlay": "25.2.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha9",
+    "@vaadin/a11y-base": "25.2.0-beta2",
+    "@vaadin/component-base": "25.2.0-beta2",
+    "@vaadin/field-base": "25.2.0-beta2",
+    "@vaadin/input-container": "25.2.0-beta2",
+    "@vaadin/item": "25.2.0-beta2",
+    "@vaadin/lit-renderer": "25.2.0-beta2",
+    "@vaadin/overlay": "25.2.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha9",
-    "@vaadin/chai-plugins": "25.2.0-alpha9",
-    "@vaadin/test-runner-commands": "25.2.0-alpha9",
+    "@vaadin/aura": "25.2.0-beta2",
+    "@vaadin/chai-plugins": "25.2.0-beta2",
+    "@vaadin/test-runner-commands": "25.2.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha9",
-    "sinon": "^21.0.2"
+    "@vaadin/vaadin-lumo-styles": "25.2.0-beta2",
+    "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a38a03e8a8be45821f39c14054c63634dafe08d0"
+  "gitHead": "9e18feb8057baf278b72fec4e42657b19e48f499"
 }

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

@@ -12,14 +12,6 @@ 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';
 
-/**
- * @polymerMixin
- * @mixes DisabledMixin
- * @mixes FocusMixin
- * @mixes InputMixin
- * @mixes KeyboardMixin
- * @param {function(new:HTMLElement)} superClass
- */
 export const ComboBoxBaseMixin = (superClass) =>
   class ComboBoxMixinBaseClass extends KeyboardMixin(InputMixin(DisabledMixin(FocusMixin(superClass)))) {
     static get properties() {

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

@@ -6,9 +6,6 @@
 import { DataProviderController } from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
-/**
- * @polymerMixin
- */
 export const ComboBoxDataProviderMixin = (superClass) =>
   class DataProviderMixin extends superClass {
     static get properties() {

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

@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright (c) 2015 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export const ComboBoxFocusIndexMixin = (superClass) =>
+  class FocusIndexMixin extends superClass {
+    static get observers() {
+      return ['__clearPendingFocusOnFilter(filter)'];
+    }
+
+    /**
+     * Scrolls the dropdown to the item at the given index and sets it as the
+     * focused (highlighted) item. Closing the dropdown without an explicit
+     * selection change (e.g. via outside click or blur) will commit the
+     * focused item as `selectedItem` — callers focusing an index other than
+     * the current selection should be aware of this side effect.
+     *
+     * @private
+     * @param {number} index
+     */
+    __focusIndex(index) {
+      if (typeof index !== 'number' || Number.isNaN(index) || index < 0) {
+        return;
+      }
+
+      // Defer until the dropdown is open and the items array has been
+      // populated. `_onOpened` and `__onDataProviderPageLoaded` re-fire
+      // the queued call once those conditions hold.
+      if (!this._overlayOpened || !this._dropdownItems || this._dropdownItems.length === 0) {
+        this.__pendingFocusIndex = index;
+        return;
+      }
+
+      if (index >= this._dropdownItems.length) {
+        return;
+      }
+
+      // Move the viewport and set the focused row. Rendering rows
+      // around `index` lets placeholder rows fire `index-requested`,
+      // which loads any missing pages via the data-provider chain.
+      this._scrollIntoView(index);
+      this._focusedIndex = index;
+
+      // A page-load may have kicked in during the scroll (placeholder
+      // rows in the new viewport requested their pages). Re-fire after
+      // the page lands so the viewport can settle around real items.
+      if (this.loading) {
+        this.__pendingFocusIndex = index;
+        return;
+      }
+
+      delete this.__pendingFocusIndex;
+      requestAnimationFrame(() => {
+        if (this.isConnected) {
+          this._updateActiveDescendant(index);
+        }
+      });
+    }
+
+    /** @private */
+    __focusPendingIndexIfNeeded() {
+      if (this.__pendingFocusIndex !== undefined && !this.loading) {
+        this.__focusIndex(this.__pendingFocusIndex);
+      }
+    }
+
+    /** @private */
+    __clearPendingFocusOnFilter() {
+      delete this.__pendingFocusIndex;
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to flush any pending
+     * `__focusIndex` call after the overlay opens.
+     *
+     * @protected
+     * @override
+     */
+    _onOpened() {
+      super._onOpened();
+      this.__focusPendingIndexIfNeeded();
+    }
+
+    /**
+     * Override method from `ComboBoxDataProviderMixin` to flush any pending
+     * `__focusIndex` call after a data-provider page lands.
+     *
+     * @private
+     * @override
+     */
+    __onDataProviderPageLoaded() {
+      super.__onDataProviderPageLoaded();
+      this.__focusPendingIndexIfNeeded();
+    }
+  };

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

@@ -4,9 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-/**
- * @polymerMixin
- */
 export const ComboBoxItemMixin = (superClass) =>
   class ComboBoxItemMixinClass extends superClass {
     static get properties() {

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

@@ -35,9 +35,6 @@ import { ComboBoxItemMixin } from './vaadin-combo-box-item-mixin.js';
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement vaadin-combo-box-item
- * @mixes ComboBoxItemMixin
- * @mixes ThemableMixin
- * @mixes DirMixin
  * @private
  */
 export class ComboBoxItem extends ComboBoxItemMixin(

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

@@ -35,10 +35,6 @@ function findItemIndex(items, callback) {
   });
 }
 
-/**
- * @polymerMixin
- * @mixes ComboBoxBaseMixin
- */
 export const ComboBoxItemsMixin = (superClass) =>
   class ComboBoxItemsMixinClass extends ComboBoxBaseMixin(superClass) {
     static get properties() {

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

@@ -5,6 +5,7 @@
  */
 import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { ComboBoxItemsMixin } from './vaadin-combo-box-items-mixin.js';
+import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
 /**
  * Checks if the value is supported as an item value in this control.
@@ -16,12 +17,6 @@ function isValidValue(value) {
   return value !== undefined && value !== null;
 }
 
-/**
- * @polymerMixin
- * @mixes ComboBoxItemsMixin
- * @mixes ValidateMixin
- * @param {function(new:HTMLElement)} superClass
- */
 export const ComboBoxMixin = (superClass) =>
   class ComboBoxMixinClass extends ValidateMixin(ComboBoxItemsMixin(superClass)) {
     static get properties() {
@@ -177,7 +172,7 @@ export const ComboBoxMixin = (superClass) =>
     _openedOrItemsChanged(opened, items, loading, keepOverlayOpened) {
       // Close the overlay if there are no items to display.
       // See https://github.com/vaadin/vaadin-combo-box/pull/964
-      this._overlayOpened = opened && (keepOverlayOpened || loading || !!(items && items.length));
+      this._overlayOpened = opened && (keepOverlayOpened || loading || !!items?.length);
     }
 
     /**
@@ -524,6 +519,18 @@ export const ComboBoxMixin = (superClass) =>
         this.selectedItem = newItems[valueIndex];
       }
 
+      // When both the previously-focused entry and the new entry at the
+      // same index are placeholders (e.g. the Flow connector mid-scroll
+      // re-pushing `_setDropdownItems`), preserve `_focusedIndex` until
+      // a follow-up call lands a real item at that position.
+      if (
+        oldItems &&
+        oldItems[this._focusedIndex] instanceof ComboBoxPlaceholder &&
+        newItems[this._focusedIndex] instanceof ComboBoxPlaceholder
+      ) {
+        return;
+      }
+
       // Try to first set focus on the item that had been focused before `newItems` were updated
       // if it is still present in the `newItems` array. Otherwise, set the focused index
       // depending on the selected item or the filter query.
@@ -552,43 +559,4 @@ export const ComboBoxMixin = (superClass) =>
 
       super._handleFocusOut();
     }
-
-    /**
-     * Fired when the value changes.
-     *
-     * @event value-changed
-     * @param {Object} detail
-     * @param {String} detail.value the combobox value
-     */
-
-    /**
-     * Fired when selected item changes.
-     *
-     * @event selected-item-changed
-     * @param {Object} detail
-     * @param {Object|String} detail.value the selected item. Type is the same as the type of `items`.
-     */
-
-    /**
-     * Fired when the user sets a custom value.
-     * @event custom-value-set
-     * @param {String} detail the custom value
-     */
-
-    /**
-     * Fired when the user commits a value 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-mixin.js

@@ -6,10 +6,6 @@
 import { isElementFocusable } from '@vaadin/a11y-base/src/focus-utils.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 
-/**
- * @polymerMixin
- * @mixes PositionMixin
- */
 export const ComboBoxOverlayMixin = (superClass) =>
   class ComboBoxOverlayMixin extends PositionMixin(superClass) {
     static get observers() {

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

@@ -19,10 +19,6 @@ import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
  *
  * @customElement vaadin-combo-box-overlay
  * @extends HTMLElement
- * @mixes ComboBoxOverlayMixin
- * @mixes DirMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
  * @private
  */
 export class ComboBoxOverlay extends ComboBoxOverlayMixin(

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

@@ -8,9 +8,6 @@ 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';
 
-/**
- * @polymerMixin
- */
 export const ComboBoxScrollerMixin = (superClass) =>
   class ComboBoxScrollerMixin extends superClass {
     static get properties() {
@@ -195,18 +192,20 @@ export const ComboBoxScrollerMixin = (superClass) =>
       }
       this.__virtualizer.scrollToIndex(Math.max(0, targetIndex));
 
-      // Sometimes the item is partly below the bottom edge, detect and adjust.
-      const lastPhysicalItem = [...this.children].find(
-        (el) => !el.hidden && el.index === this.__virtualizer.lastVisibleIndex,
-      );
-      if (!lastPhysicalItem || index !== lastPhysicalItem.index) {
+      // Flush so the rect-based correction below runs on settled positions.
+      this.__virtualizer.flush();
+
+      const target = [...this.children].find((el) => !el.hidden && el.index === index);
+      if (!target) {
         return;
       }
-      const lastPhysicalItemRect = lastPhysicalItem.getBoundingClientRect();
+      const targetRect = target.getBoundingClientRect();
       const scrollerRect = this.getBoundingClientRect();
-      const scrollTopAdjust = lastPhysicalItemRect.bottom - scrollerRect.bottom + this._viewportTotalPaddingBottom;
-      if (scrollTopAdjust > 0) {
-        this.scrollTop += scrollTopAdjust;
+      const targetBottom = targetRect.bottom + this._viewportTotalPaddingBottom;
+      if (targetBottom > scrollerRect.bottom) {
+        this.scrollTop += targetBottom - scrollerRect.bottom;
+      } else if (targetRect.top < scrollerRect.top) {
+        this.scrollTop -= scrollerRect.top - targetRect.top;
       }
     }
 
@@ -262,6 +261,25 @@ export const ComboBoxScrollerMixin = (superClass) =>
         }
 
         this.requestContentUpdate();
+        return;
+      }
+
+      // Reset the DOM scrollTop and the virtualizer adapter's
+      // `_scrollPosition` cache. Without the cache reset, the adapter's
+      // ResizeObserver restores the prior offset when the overlay becomes
+      // visible again, leaving the next open stuck at the previous offset
+      // (or blank with dataProvider) until the user scrolls. The
+      // virtualizer's own `scrollToIndex` can't help — by the time this
+      // observer runs, `offsetHeight` is already 0 and its scroll API is
+      // a no-op. Guarded on `_scrollPosition > 0` so the reset is skipped
+      // when there is nothing to reset (e.g. the initial observer run
+      // before the dropdown has ever been opened); unconditionally
+      // touching `scrollTop` on connect can affect the outer document's
+      // scroll position (see the combo-box re-layout integration test).
+      const adapter = this.__virtualizer && this.__virtualizer.__adapter;
+      if (adapter && adapter._scrollPosition > 0) {
+        this.scrollTop = 0;
+        adapter._scrollPosition = 0;
       }
     }
 

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

@@ -14,7 +14,6 @@ import { ComboBoxScrollerMixin } from './vaadin-combo-box-scroller-mixin.js';
  *
  * @customElement vaadin-combo-box-scroller
  * @extends HTMLElement
- * @mixes ComboBoxScrollerMixin
  * @private
  */
 export class ComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {

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

@@ -225,6 +225,8 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
  * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
+ * @fires {CustomEvent} vaadin-combo-box-dropdown-opened - Fired after the `vaadin-combo-box-overlay` opens.
+ * @fires {CustomEvent} vaadin-combo-box-dropdown-closed - Fired after the `vaadin-combo-box-overlay` closes.
  */
 declare class ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxEventMap<TItem>>(

package/src/vaadin-combo-box.js

@@ -22,6 +22,7 @@ import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { comboBoxStyles } from './styles/vaadin-combo-box-base-styles.js';
 import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
+import { ComboBoxFocusIndexMixin } from './vaadin-combo-box-focus-index-mixin.js';
 import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
 
 /**
@@ -157,19 +158,17 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
  * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
+ * @fires {CustomEvent} vaadin-combo-box-dropdown-opened - Fired after the `vaadin-combo-box-overlay` opens.
+ * @fires {CustomEvent} vaadin-combo-box-dropdown-closed - Fired after the `vaadin-combo-box-overlay` closes.
  *
  * @customElement vaadin-combo-box
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes InputControlMixin
- * @mixes PatternMixin
- * @mixes ComboBoxDataProviderMixin
- * @mixes ComboBoxMixin
  */
-class ComboBox extends ComboBoxDataProviderMixin(
-  ComboBoxMixin(
-    PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
+class ComboBox extends ComboBoxFocusIndexMixin(
+  ComboBoxDataProviderMixin(
+    ComboBoxMixin(
+      PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
+    ),
   ),
 ) {
   static get is() {