@vaadin/combo-box 24.4.0-dev.4b20a0c55.3 → 24.4.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.4.0-dev.4b20a0c55.3",
+  "version": "24.4.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -26,7 +26,9 @@
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
-    "web-types.lit.json"
+    "web-types.lit.json",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js"
   ],
   "keywords": [
     "Vaadin",
@@ -38,21 +40,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/component-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/field-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/input-container": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/item": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/lit-renderer": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/overlay": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55.3"
+    "@vaadin/a11y-base": "24.4.0-rc1",
+    "@vaadin/component-base": "24.4.0-rc1",
+    "@vaadin/field-base": "24.4.0-rc1",
+    "@vaadin/input-container": "24.4.0-rc1",
+    "@vaadin/item": "24.4.0-rc1",
+    "@vaadin/lit-renderer": "24.4.0-rc1",
+    "@vaadin/overlay": "24.4.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.6.0",
-    "@vaadin/text-field": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/text-field": "24.4.0-rc1",
     "lit": "^3.0.0",
     "sinon": "^13.0.2"
   },
@@ -60,5 +62,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "41cf17453d7506fb635c088a0425e20b6e82b89b"
+  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
 }

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

@@ -3,8 +3,6 @@
  * Copyright (c) 2015 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DataProviderController } from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
-import { get } from '@vaadin/component-base/src/path-utils.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
 /**
@@ -23,6 +21,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
           type: Number,
           value: 50,
           observer: '_pageSizeChanged',
+          sync: true,
         },
 
         /**
@@ -32,6 +31,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         size: {
           type: Number,
           observer: '_sizeChanged',
+          sync: true,
         },
 
         /**
@@ -51,6 +51,14 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         dataProvider: {
           type: Object,
           observer: '_dataProviderChanged',
+          sync: true,
+        },
+
+        /** @private */
+        _pendingRequests: {
+          value: () => {
+            return {};
+          },
         },
 
         /** @private */
@@ -62,12 +70,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         __previousDataProviderFilter: {
           type: String,
         },
-
-        /** @private */
-        _hasData: {
-          type: Boolean,
-          value: false,
-        },
       };
     }
 
@@ -79,46 +81,20 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       ];
     }
 
-    constructor() {
-      super();
-
-      /** @type {DataProviderController} */
-      this._dataProviderController = new DataProviderController(this, {
-        size: this.size,
-        pageSize: this.pageSize,
-        getItemId: (item) => get(this.itemIdPath, item),
-        placeholder: this.__placeHolder,
-        dataProvider: this.dataProvider ? this.dataProvider.bind(this) : null,
-        dataProviderParams: () => ({ filter: this.filter }),
-      });
-    }
-
     /** @protected */
     ready() {
       super.ready();
-
-      this._dataProviderController.addEventListener('page-requested', this.__onDataProviderPageRequested.bind(this));
-      this._dataProviderController.addEventListener('page-loaded', this.__onDataProviderPageLoaded.bind(this));
-
       this._scroller.addEventListener('index-requested', (e) => {
         if (!this._shouldFetchData()) {
           return;
         }
 
         const index = e.detail.index;
-        const currentScrollerPos = e.detail.currentScrollerPos;
-        const allowedIndexRange = Math.floor(this.pageSize * 1.5);
-
-        // Ignores the indexes, which are being re-sent during scrolling reset,
-        // if the corresponding page is around the current scroller position.
-        // Otherwise, there might be a last pages duplicates, which cause the
-        // loading indicator hanging and blank items
-        if (this._shouldSkipIndex(index, allowedIndexRange, currentScrollerPos)) {
-          return;
-        }
-
         if (index !== undefined) {
-          this._dataProviderController.ensureFlatIndexLoaded(index);
+          const page = this._getPageForIndex(index);
+          if (this._shouldLoadPage(page)) {
+            this._loadPage(page);
+          }
         }
       });
     }
@@ -133,10 +109,11 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       if (this.__previousDataProviderFilter !== filter) {
         this.__previousDataProviderFilter = filter;
 
-        this._keepOverlayOpened = true;
+        this.__keepOverlayOpened = true;
+        this._pendingRequests = {};
         this.size = undefined;
         this.clearCache();
-        this._keepOverlayOpened = false;
+        this.__keepOverlayOpened = false;
       }
     }
 
@@ -155,114 +132,110 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         return;
       }
 
-      if (opened && !this._hasData) {
-        this._dataProviderController.loadFirstPage();
+      if (opened && this._shouldLoadPage(0)) {
+        this._loadPage(0);
       }
     }
 
     /** @private */
-    _shouldSkipIndex(index, allowedIndexRange, currentScrollerPos) {
-      return (
-        currentScrollerPos !== 0 &&
-        index >= currentScrollerPos - allowedIndexRange &&
-        index <= currentScrollerPos + allowedIndexRange
-      );
-    }
+    _shouldLoadPage(page) {
+      if (this._forceNextRequest) {
+        this._forceNextRequest = false;
+        return true;
+      }
 
-    /** @private */
-    __onDataProviderPageRequested() {
-      this.loading = true;
+      const loadedItem = this.filteredItems[page * this.pageSize];
+      if (loadedItem !== undefined) {
+        return loadedItem instanceof ComboBoxPlaceholder;
+      }
+      return this.size === undefined;
     }
 
     /** @private */
-    __onDataProviderPageLoaded() {
-      this._hasData = true;
+    _loadPage(page) {
+      // Make sure same page isn't requested multiple times.
+      if (this._pendingRequests[page] || !this.dataProvider) {
+        return;
+      }
 
-      this.requestContentUpdate();
+      const params = {
+        page,
+        pageSize: this.pageSize,
+        filter: this.filter,
+      };
 
-      if (!this.opened && !this._isInputFocused()) {
-        this._commitValue();
-      }
-    }
+      const callback = (items, size) => {
+        if (this._pendingRequests[page] !== callback) {
+          return;
+        }
 
-    /**
-     * Clears the cached pages and reloads data from dataprovider when needed.
-     */
-    clearCache() {
-      if (!this.dataProvider) {
-        return;
-      }
+        const filteredItems = this.filteredItems ? [...this.filteredItems] : [];
+        filteredItems.splice(params.page * params.pageSize, items.length, ...items);
+        this.filteredItems = filteredItems;
 
-      this._dataProviderController.clearCache();
+        if (!this.opened && !this._isInputFocused()) {
+          this._commitValue();
+        }
 
-      this._hasData = false;
+        if (size !== undefined) {
+          this.size = size;
+        }
 
-      this.requestContentUpdate();
+        delete this._pendingRequests[page];
 
-      if (this._shouldFetchData()) {
-        this._dataProviderController.loadFirstPage();
-      }
+        if (Object.keys(this._pendingRequests).length === 0) {
+          this.loading = false;
+        }
+      };
+
+      this._pendingRequests[page] = callback;
+      // Set the `loading` flag only after marking the request as pending
+      // to prevent the same page from getting requested multiple times
+      // as a result of `__loadingChanged` in the scroller which requests
+      // a virtualizer update which in turn may trigger a data provider page request.
+      this.loading = true;
+      this.dataProvider(params, callback);
     }
 
     /** @private */
-    _sizeChanged(size = 0) {
-      const { rootCache } = this._dataProviderController;
-      // When the size update originates from the developer,
-      // sync the new size with the controller and trigger
-      // a content update to re-render the scroller.
-      if (rootCache.size !== size) {
-        rootCache.size = size;
-        this.requestContentUpdate();
-      }
+    _getPageForIndex(index) {
+      return Math.floor(index / this.pageSize);
     }
 
     /**
-     * @private
-     * @override
+     * Clears the cached pages and reloads data from dataprovider when needed.
      */
-    _filteredItemsChanged(items) {
+    clearCache() {
       if (!this.dataProvider) {
-        return super._filteredItemsChanged(items);
+        return;
       }
 
-      const { rootCache } = this._dataProviderController;
-      // When the items update originates from the developer,
-      // sync the new items with the controller and trigger
-      // a content update to re-render the scroller.
-      if (rootCache.items !== items) {
-        rootCache.items = items;
-        this.requestContentUpdate();
+      this._pendingRequests = {};
+      const filteredItems = [];
+      for (let i = 0; i < (this.size || 0); i++) {
+        filteredItems.push(this.__placeHolder);
       }
-    }
+      this.filteredItems = filteredItems;
 
-    /** @override */
-    requestContentUpdate() {
-      if (this.dataProvider) {
-        const { rootCache } = this._dataProviderController;
-
-        // Sync the controller's size with the component.
-        // They can be out of sync after, for example,
-        // the controller received new data.
-        if ((this.size || 0) !== rootCache.size) {
-          this.size = rootCache.size;
-        }
-
-        // Sync the controller's items with the component.
-        // They can be out of sync after, for example,
-        // the controller received new data.
-        if (this.filteredItems !== rootCache.items) {
-          this.filteredItems = rootCache.items;
-        }
-
-        // Sync the controller's loading state with the component.
-        this.loading = this._dataProviderController.isLoading();
+      if (this._shouldFetchData()) {
+        this._forceNextRequest = false;
+        this._loadPage(0);
+      } else {
+        this._forceNextRequest = true;
+      }
+    }
 
-        // Set a copy of the controller's items as the dropdown items
-        // to trigger an update of the focused index in _setDropdownItems.
-        this._setDropdownItems([...this.filteredItems]);
+    /** @private */
+    _sizeChanged(size = 0) {
+      const filteredItems = (this.filteredItems || []).slice(0, size);
+      for (let i = 0; i < size; i++) {
+        filteredItems[i] = filteredItems[i] !== undefined ? filteredItems[i] : this.__placeHolder;
       }
+      this.filteredItems = filteredItems;
 
-      super.requestContentUpdate();
+      // Cleans up the redundant pending requests for pages > size
+      // Refers to https://github.com/vaadin/vaadin-flow-components/issues/229
+      this._flushPendingRequests(size);
     }
 
     /** @private */
@@ -271,8 +244,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         this.pageSize = oldPageSize;
         throw new Error('`pageSize` value must be an integer > 0');
       }
-
-      this._dataProviderController.setPageSize(pageSize);
       this.clearCache();
     }
 
@@ -282,7 +253,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         this.dataProvider = oldDataProvider;
       });
 
-      this._dataProviderController.setDataProvider(dataProvider);
       this.clearCache();
     }
 
@@ -291,6 +261,8 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       if (this.items !== undefined && this.dataProvider !== undefined) {
         restoreOldValueCallback();
         throw new Error('Using `items` and `dataProvider` together is not supported');
+      } else if (this.dataProvider && !this.filteredItems) {
+        this.filteredItems = [];
       }
     }
 
@@ -309,4 +281,28 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         }
       }
     }
+
+    /**
+     * This method cleans up the page callbacks which refers to the
+     * non-existing pages, i.e. which item indexes are greater than the
+     * changed size.
+     * This case is basically happens when:
+     * 1. Users scroll fast to the bottom and combo box generates the
+     * redundant page request/callback
+     * 2. Server side uses undefined size lazy loading and suddenly reaches
+     * the exact size which is on the range edge
+     * (for default page size = 50, it will be 100, 200, 300, ...).
+     * @param size the new size of items
+     * @private
+     */
+    _flushPendingRequests(size) {
+      if (this._pendingRequests) {
+        const lastPage = Math.ceil(size / this.pageSize);
+        Object.entries(this._pendingRequests).forEach(([page, callback]) => {
+          if (parseInt(page) >= lastPage) {
+            callback([], size);
+          }
+        });
+      }
+    }
   };

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

@@ -60,7 +60,7 @@ export const ComboBoxItemMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
+      return ['__rendererOrItemChanged(renderer, index, item, selected, focused)', '__updateLabel(label, renderer)'];
     }
 
     static get observedAttributes() {

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

@@ -71,6 +71,7 @@ export const ComboBoxMixin = (subclass) =>
           notify: true,
           value: false,
           reflectToAttribute: true,
+          sync: true,
           observer: '_openedChanged',
         },
 
@@ -80,6 +81,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         autoOpenDisabled: {
           type: Boolean,
+          sync: true,
         },
 
         /**
@@ -104,7 +106,10 @@ export const ComboBoxMixin = (subclass) =>
          *   - `model.item` The item.
          * @type {ComboBoxRenderer | undefined}
          */
-        renderer: Function,
+        renderer: {
+          type: Object,
+          sync: true,
+        },
 
         /**
          * A full set of items to filter the visible options from.
@@ -113,6 +118,7 @@ export const ComboBoxMixin = (subclass) =>
          */
         items: {
           type: Array,
+          sync: true,
           observer: '_itemsChanged',
         },
 
@@ -138,6 +144,7 @@ export const ComboBoxMixin = (subclass) =>
         filteredItems: {
           type: Array,
           observer: '_filteredItemsChanged',
+          sync: true,
         },
 
         /**
@@ -154,6 +161,7 @@ export const ComboBoxMixin = (subclass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -164,6 +172,7 @@ export const ComboBoxMixin = (subclass) =>
           type: Number,
           observer: '_focusedIndexChanged',
           value: -1,
+          sync: true,
         },
 
         /**
@@ -174,6 +183,7 @@ export const ComboBoxMixin = (subclass) =>
           type: String,
           value: '',
           notify: true,
+          sync: true,
         },
 
         /**
@@ -183,6 +193,7 @@ export const ComboBoxMixin = (subclass) =>
         selectedItem: {
           type: Object,
           notify: true,
+          sync: true,
         },
 
         /**
@@ -199,6 +210,7 @@ export const ComboBoxMixin = (subclass) =>
           type: String,
           value: 'label',
           observer: '_itemLabelPathChanged',
+          sync: true,
         },
 
         /**
@@ -214,6 +226,7 @@ export const ComboBoxMixin = (subclass) =>
         itemValuePath: {
           type: String,
           value: 'value',
+          sync: true,
         },
 
         /**
@@ -223,7 +236,10 @@ export const ComboBoxMixin = (subclass) =>
          * `dataProvider` callback).
          * @attr {string} item-id-path
          */
-        itemIdPath: String,
+        itemIdPath: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * @type {!HTMLElement | undefined}
@@ -240,27 +256,38 @@ export const ComboBoxMixin = (subclass) =>
          */
         _dropdownItems: {
           type: Array,
+          sync: true,
         },
 
         /** @private */
         _closeOnBlurIsPrevented: Boolean,
 
         /** @private */
-        _scroller: Object,
+        _scroller: {
+          type: Object,
+          sync: true,
+        },
 
         /** @private */
         _overlayOpened: {
           type: Boolean,
+          sync: true,
           observer: '_overlayOpenedChanged',
         },
+
+        /** @private */
+        __keepOverlayOpened: {
+          type: Boolean,
+          sync: true,
+        },
       };
     }
 
     static get observers() {
       return [
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-        '_openedOrItemsChanged(opened, _dropdownItems, loading, _keepOverlayOpened)',
-        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
+        '_openedOrItemsChanged(opened, _dropdownItems, loading, __keepOverlayOpened)',
+        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, _theme)',
       ];
     }
 
@@ -413,6 +440,18 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * Override LitElement lifecycle callback to handle filter property change.
+     * @param {Object} props
+     */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('filter')) {
+        this._filterChanged(this.filter);
+      }
+    }
+
     /** @private */
     _initOverlay() {
       const overlay = this.$.overlay;
@@ -441,25 +480,23 @@ export const ComboBoxMixin = (subclass) =>
      * @protected
      */
     _initScroller(host) {
-      const scrollerTag = `${this._tagNamePrefix}-scroller`;
+      const scroller = document.createElement(`${this._tagNamePrefix}-scroller`);
+
+      scroller.owner = host || this;
+      scroller.getItemLabel = this._getItemLabel.bind(this);
+      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
 
       const overlay = this._overlayElement;
 
       overlay.renderer = (root) => {
-        if (!root.firstChild) {
-          root.appendChild(document.createElement(scrollerTag));
+        if (!root.innerHTML) {
+          root.appendChild(scroller);
         }
       };
 
       // Ensure the scroller is rendered
       overlay.requestContentUpdate();
 
-      const scroller = overlay.querySelector(scrollerTag);
-
-      scroller.owner = host || this;
-      scroller.getItemLabel = this._getItemLabel.bind(this);
-      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
-
       // Trigger the observer to set properties
       this._scroller = scroller;
     }
@@ -483,6 +520,17 @@ export const ComboBoxMixin = (subclass) =>
           renderer,
           theme,
         });
+
+        // NOTE: in PolylitMixin, setProperties() waits for `hasUpdated` to be set.
+        // This means for the first opening, properties won't be set synchronously.
+        // Call `performUpdate()` in this case to mimic the Polymer version logic.
+        if (scroller.performUpdate && !scroller.hasUpdated) {
+          try {
+            scroller.performUpdate();
+          } catch (_) {
+            // Suppress errors in synchronous tests for pre-opened combo-box.
+          }
+        }
       }
     }
 
@@ -490,7 +538,7 @@ export const ComboBoxMixin = (subclass) =>
     _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 && items.length));
     }
 
     /** @private */
@@ -1126,10 +1174,6 @@ export const ComboBoxMixin = (subclass) =>
         this.items = oldItems;
       });
 
-      if (this.dataProvider) {
-        return;
-      }
-
       if (items) {
         this.filteredItems = items.slice(0);
       } else if (oldItems) {