@vaadin/combo-box 23.1.0 → 23.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.1.0",
+  "version": "23.1.3",
   "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.0",
-    "@vaadin/field-base": "^23.1.0",
-    "@vaadin/input-container": "^23.1.0",
-    "@vaadin/item": "^23.1.0",
-    "@vaadin/lit-renderer": "^23.1.0",
-    "@vaadin/vaadin-lumo-styles": "^23.1.0",
-    "@vaadin/vaadin-material-styles": "^23.1.0",
-    "@vaadin/vaadin-overlay": "^23.1.0",
-    "@vaadin/vaadin-themable-mixin": "^23.1.0"
+    "@vaadin/component-base": "^23.1.3",
+    "@vaadin/field-base": "^23.1.3",
+    "@vaadin/input-container": "^23.1.3",
+    "@vaadin/item": "^23.1.3",
+    "@vaadin/lit-renderer": "^23.1.3",
+    "@vaadin/vaadin-lumo-styles": "^23.1.3",
+    "@vaadin/vaadin-material-styles": "^23.1.3",
+    "@vaadin/vaadin-overlay": "^23.1.3",
+    "@vaadin/vaadin-themable-mixin": "^23.1.3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.1.0",
+    "@vaadin/polymer-legacy-adapter": "^23.1.3",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "^23.1.0",
+    "@vaadin/text-field": "^23.1.3",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "322bba42b83f908a78cd972b06acadc5da95a69d"
+  "gitHead": "3066c296ad0ef652bc49417005523398199f1bf2"
 }

package/src/vaadin-combo-box-data-provider-mixin.d.ts

@@ -20,7 +20,7 @@ export type ComboBoxDataProvider<TItem> = (
 
 export declare function ComboBoxDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ComboBoxDataProviderMixinClass<TItem>>;
+): Constructor<ComboBoxDataProviderMixinClass<TItem>> & T;
 
 export declare class ComboBoxDataProviderMixinClass<TItem> {
   /**

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

@@ -62,13 +62,17 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         __placeHolder: {
           value: new ComboBoxPlaceholder(),
         },
+
+        /** @private */
+        __previousDataProviderFilter: {
+          type: String,
+        },
       };
     }
 
     static get observers() {
       return [
-        '_dataProviderFilterChanged(filter, dataProvider)',
-        '_dataProviderClearFilter(dataProvider, opened, value)',
+        '_dataProviderFilterChanged(filter)',
         '_warnDataProviderValue(dataProvider, value)',
         '_ensureFirstPage(opened)',
       ];
@@ -77,7 +81,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     /** @protected */
     ready() {
       super.ready();
-      this.clearCache();
       this.$.dropdown.addEventListener('index-requested', (e) => {
         const index = e.detail.index;
         const currentScrollerPos = e.detail.currentScrollerPos;
@@ -101,38 +104,25 @@ export const ComboBoxDataProviderMixin = (superClass) =>
     }
 
     /** @private */
-    _dataProviderFilterChanged() {
-      if (!this._shouldFetchData()) {
+    _dataProviderFilterChanged(filter) {
+      if (this.__previousDataProviderFilter === undefined && filter === '') {
+        this.__previousDataProviderFilter = filter;
         return;
       }
 
-      this._refreshData();
-    }
+      if (this.__previousDataProviderFilter !== filter) {
+        this.__previousDataProviderFilter = filter;
 
-    /** @private */
-    _dataProviderClearFilter(dataProvider, opened, value) {
-      // Can't depend on filter in this observer as we don't want
-      // to clear the filter whenever it's set
-      if (dataProvider && !this.loading && this.filter && !(opened && this.autoOpenDisabled && value === this.filter)) {
-        this._refreshData(true);
-      }
-    }
+        this._pendingRequests = {};
+        // Immediately mark as loading if this refresh leads to re-fetching pages
+        // This prevents some issues with the properties below triggering
+        // observers that also rely on the loading state
+        this.loading = this._shouldFetchData();
+        // Reset size and internal loading state
+        this.size = undefined;
 
-    /** @private */
-    _refreshData(clearFilter) {
-      // Immediately mark as loading if this refresh leads to re-fetching pages
-      // This prevents some issues with the properties below triggering
-      // observers that also rely on the loading state
-      this.loading = this._shouldFetchData();
-      // Reset size and internal loading state
-      this.size = undefined;
-      this._pendingRequests = {};
-      // Clear filter if requested
-      if (clearFilter) {
-        this.filter = '';
+        this.clearCache();
       }
-      // Clear cached pages, and reload current page if we need the data
-      this.clearCache();
     }
 
     /** @private */
@@ -188,13 +178,10 @@ export const ComboBoxDataProviderMixin = (superClass) =>
 
         const callback = (items, size) => {
           if (this._pendingRequests[page] === callback) {
-            if (!this.filteredItems) {
-              const filteredItems = [];
-              filteredItems.splice(params.page * params.pageSize, items.length, ...items);
-              this.filteredItems = filteredItems;
-            } else {
-              this.splice('filteredItems', params.page * params.pageSize, items.length, ...items);
-            }
+            const filteredItems = this.filteredItems ? [...this.filteredItems] : [];
+            filteredItems.splice(params.page * params.pageSize, items.length, ...items);
+            this.filteredItems = filteredItems;
+
             // Update selectedItem from filteredItems if value is set
             if (this._isValidValue(this.value) && this._getItemValue(this.selectedItem) !== this.value) {
               this._selectItemForValue(this.value);
@@ -232,13 +219,16 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       if (!this.dataProvider) {
         return;
       }
+
       this._pendingRequests = {};
       const filteredItems = [];
       for (let i = 0; i < (this.size || 0); i++) {
         filteredItems.push(this.__placeHolder);
       }
       this.filteredItems = filteredItems;
+
       if (this._shouldFetchData()) {
+        this._forceNextRequest = false;
         this._loadPage(0);
       } else {
         this._forceNextRequest = true;
@@ -272,6 +262,8 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       this._ensureItemsOrDataProvider(() => {
         this.dataProvider = oldDataProvider;
       });
+
+      this.clearCache();
     }
 
     /** @private */

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

@@ -126,13 +126,13 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

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

@@ -24,11 +24,11 @@ export type ComboBoxRenderer<TItem> = (
 
 export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ComboBoxMixinClass<TItem>> &
+): Constructor<ComboBoxMixinClass<TItem>> &
   Constructor<DisabledMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<KeyboardMixinClass>;
+  Constructor<KeyboardMixinClass> &
+  T;
 
 export declare class ComboBoxMixinClass<TItem> {
   /**

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

@@ -203,8 +203,7 @@ export const ComboBoxMixin = (subclass) =>
     static get observers() {
       return [
         '_filterChanged(filter, itemValuePath, itemLabelPath)',
-        '_itemsOrPathsChanged(items.*, itemValuePath, itemLabelPath)',
-        '_filteredItemsChanged(filteredItems.*, itemValuePath, itemLabelPath)',
+        '_filteredItemsChanged(filteredItems)',
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
       ];
     }
@@ -779,9 +778,7 @@ export const ComboBoxMixin = (subclass) =>
 
       this._clearSelectionRange();
 
-      if (!this.dataProvider) {
-        this.filter = '';
-      }
+      this.filter = '';
     }
 
     /**
@@ -834,7 +831,7 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /** @private */
-    _filterChanged(filter, itemValuePath, itemLabelPath) {
+    _filterChanged(filter, _itemValuePath, _itemLabelPath) {
       if (filter === undefined) {
         return;
       }
@@ -848,7 +845,7 @@ export const ComboBoxMixin = (subclass) =>
         // 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({ path: 'filteredItems', value: this.filteredItems }, itemValuePath, itemLabelPath);
+        this._filteredItemsChanged(this.filteredItems);
       }
     }
 
@@ -924,14 +921,11 @@ export const ComboBoxMixin = (subclass) =>
       }
 
       if (this._isValidValue(value)) {
-        let item;
         if (this._getItemValue(this.selectedItem) !== value) {
           this._selectItemForValue(value);
-        } else {
-          item = this.selectedItem;
         }
 
-        if (!item && this.allowCustomValue) {
+        if (!this.selectedItem && this.allowCustomValue) {
           this._inputElementValue = value;
         }
 
@@ -939,6 +933,9 @@ export const ComboBoxMixin = (subclass) =>
       } else {
         this.selectedItem = null;
       }
+
+      this.filter = '';
+
       // In the next _detectAndDispatchChange() call, the change detection should pass
       this._lastCommittedValue = undefined;
     }
@@ -956,53 +953,46 @@ export const ComboBoxMixin = (subclass) =>
       this._ensureItemsOrDataProvider(() => {
         this.items = oldItems;
       });
-    }
 
-    /** @private */
-    _itemsOrPathsChanged(e) {
-      if (e.path === 'items' || e.path === 'items.splices') {
-        if (this.items) {
-          this.filteredItems = this.items.slice(0);
-        } else if (this.__previousItems) {
-          // Only clear filteredItems if the component had items previously but got cleared
-          this.filteredItems = null;
-        }
+      if (items) {
+        this.filteredItems = items.slice(0);
+      } else if (this.__previousItems) {
+        // Only clear filteredItems if the component had items previously but got cleared
+        this.filteredItems = null;
+      }
 
-        const valueIndex = this._indexOfValue(this.value, this.items);
-        this._focusedIndex = valueIndex;
+      const valueIndex = this._indexOfValue(this.value, items);
+      this._focusedIndex = valueIndex;
 
-        const item = valueIndex > -1 && this.items[valueIndex];
-        if (item) {
-          this.selectedItem = item;
-        }
+      const item = valueIndex > -1 && items[valueIndex];
+      if (item) {
+        this.selectedItem = item;
       }
-      this.__previousItems = e.value;
+      this.__previousItems = items;
     }
 
     /** @private */
-    _filteredItemsChanged(e) {
-      if (e.path === 'filteredItems' || e.path === 'filteredItems.splices') {
-        this._setOverlayItems(this.filteredItems);
-
-        // When the external filtering is used and `value` was provided before `filteredItems`,
-        // initialize the selected item with the current value here. This will also cause
-        // the input element value to sync. In other cases, the selected item is already initialized
-        // in other observers such as `valueChanged`, `_itemsOrPathsChanged`.
-        const valueIndex = this._indexOfValue(this.value, this.filteredItems);
-        if (this.selectedItem === null && valueIndex >= 0) {
-          this._selectItemForValue(this.value);
-        }
+    _filteredItemsChanged(filteredItems, _itemValuePath, _itemLabelPath) {
+      this._setOverlayItems(filteredItems);
+
+      // When the external filtering is used and `value` was provided before `filteredItems`,
+      // initialize the selected item with the current value here. This will also cause
+      // the input element value to sync. In other cases, the selected item is already initialized
+      // in other observers such as `valueChanged`, `_itemsChanged`.
+      const valueIndex = this._indexOfValue(this.value, filteredItems);
+      if (this.selectedItem === null && valueIndex >= 0) {
+        this._selectItemForValue(this.value);
+      }
 
-        const inputValue = this._inputElementValue;
-        if (inputValue === undefined || inputValue === this._getItemLabel(this.selectedItem)) {
-          // When the input element value is the same as the current value or not defined,
-          // set the focused index to the item that matches the value.
-          this._focusedIndex = this.$.dropdown.indexOfLabel(this._getItemLabel(this.selectedItem));
-        } else {
-          // When the user filled in something that is different from the current value = filtering is enabled,
-          // set the focused index to the item that matches the filter query.
-          this._focusedIndex = this.$.dropdown.indexOfLabel(this.filter);
-        }
+      const inputValue = this._inputElementValue;
+      if (inputValue === undefined || inputValue === this._getItemLabel(this.selectedItem)) {
+        // When the input element value is the same as the current value or not defined,
+        // set the focused index to the item that matches the value.
+        this._focusedIndex = this.$.dropdown.indexOfLabel(this._getItemLabel(this.selectedItem));
+      } else {
+        // When the user filled in something that is different from the current value = filtering is enabled,
+        // set the focused index to the item that matches the filter query.
+        this._focusedIndex = this.$.dropdown.indexOfLabel(this.filter);
       }
     }
 

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

@@ -212,13 +212,13 @@ declare class ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: ComboBox<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: ComboBox<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }