@vaadin/combo-box 23.1.7 → 23.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.1.7",
+  "version": "23.1.9",
   "publishConfig": {
     "access": "public"
   },
@@ -36,23 +36,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.1.7",
-    "@vaadin/field-base": "~23.1.7",
-    "@vaadin/input-container": "~23.1.7",
-    "@vaadin/item": "~23.1.7",
-    "@vaadin/lit-renderer": "~23.1.7",
-    "@vaadin/vaadin-lumo-styles": "~23.1.7",
-    "@vaadin/vaadin-material-styles": "~23.1.7",
-    "@vaadin/vaadin-overlay": "~23.1.7",
-    "@vaadin/vaadin-themable-mixin": "~23.1.7"
+    "@vaadin/component-base": "~23.1.9",
+    "@vaadin/field-base": "~23.1.9",
+    "@vaadin/input-container": "~23.1.9",
+    "@vaadin/item": "~23.1.9",
+    "@vaadin/lit-renderer": "~23.1.9",
+    "@vaadin/vaadin-lumo-styles": "~23.1.9",
+    "@vaadin/vaadin-material-styles": "~23.1.9",
+    "@vaadin/vaadin-overlay": "~23.1.9",
+    "@vaadin/vaadin-themable-mixin": "~23.1.9"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "~23.1.7",
+    "@vaadin/polymer-legacy-adapter": "~23.1.9",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "~23.1.7",
+    "@vaadin/text-field": "~23.1.9",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "879a4e5e6a245809bafa0ef2b5cdb24aef72565d"
+  "gitHead": "ad8461e09f049c3f04f50278d38d0f5a98604904"
 }

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

@@ -90,6 +90,7 @@ export class ComboBoxScroller extends PolymerElement {
        */
       selectedItem: {
         type: Object,
+        observer: '__selectedItemChanged',
       },
 
       /**
@@ -245,7 +246,14 @@ export class ComboBoxScroller extends PolymerElement {
   /** @private */
   __loadingChanged(loading) {
     if (this.__virtualizer && !loading) {
-      setTimeout(() => this.requestContentUpdate());
+      this.requestContentUpdate();
+    }
+  }
+
+  /** @private */
+  __selectedItemChanged() {
+    if (this.__virtualizer) {
+      this.requestContentUpdate();
     }
   }
 
@@ -292,7 +300,7 @@ export class ComboBoxScroller extends PolymerElement {
 
     el.setProperties({
       item,
-      index: this.__requestItemByIndex(item, index),
+      index,
       label: this.getItemLabel(item),
       selected: this.__isItemSelected(item, this.selectedItem, this.itemIdPath),
       renderer: this.renderer,
@@ -309,6 +317,10 @@ export class ComboBoxScroller extends PolymerElement {
     } else {
       el.removeAttribute('theme');
     }
+
+    if (item instanceof ComboBoxPlaceholder) {
+      this.__requestItemByIndex(index);
+    }
   }
 
   /** @private */
@@ -349,19 +361,29 @@ export class ComboBoxScroller extends PolymerElement {
   }
 
   /**
-   * If dataProvider is used, dispatch a request for the item’s index if
-   * the item is a placeholder object.
+   * Dispatches an `index-requested` event for the given index to notify
+   * the data provider that it should start loading the page containing the requested index.
    *
-   * @return {number}
+   * The event is dispatched asynchronously to prevent an immediate page request and therefore
+   * a possible infinite recursion in case the data provider implements page request cancelation logic
+   * by invoking data provider page callbacks with an empty array.
+   * The infinite recursion may occur otherwise since invoking a data provider page callback with an empty array
+   * triggers a synchronous scroller update and, if the callback corresponds to the currently visible page,
+   * the scroller will synchronously request the page again which may lead to looping in the end.
+   * That was the case for the Flow counterpart:
+   * https://github.com/vaadin/flow-components/issues/3553#issuecomment-1239344828
    */
-  __requestItemByIndex(item, index) {
-    if (item instanceof ComboBoxPlaceholder && index !== undefined) {
+  __requestItemByIndex(index) {
+    requestAnimationFrame(() => {
       this.dispatchEvent(
-        new CustomEvent('index-requested', { detail: { index, currentScrollerPos: this._oldScrollerPosition } }),
+        new CustomEvent('index-requested', {
+          detail: {
+            index,
+            currentScrollerPos: this._oldScrollerPosition,
+          },
+        }),
       );
-    }
-
-    return index;
+    });
   }
 
   /** @private */