@vaadin/combo-box 23.1.0-beta3 → 23.1.0-rc2

package/package.json

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

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

@@ -5,7 +5,7 @@
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
 
-export type ComboBoxDataProviderCallback<TItem> = (items: Array<TItem>, size: number) => void;
+export type ComboBoxDataProviderCallback<TItem> = (items: TItem[], size: number) => void;
 
 export interface ComboBoxDataProviderParams {
   page: number;

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

@@ -74,18 +74,6 @@ export const ComboBoxDataProviderMixin = (superClass) =>
       ];
     }
 
-    /** @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.size = undefined;
-        this._pendingRequests = {};
-        this.filter = '';
-        this.clearCache();
-      }
-    }
-
     /** @protected */
     ready() {
       super.ready();
@@ -118,8 +106,32 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         return;
       }
 
+      this._refreshData();
+    }
+
+    /** @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);
+      }
+    }
+
+    /** @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 = '';
+      }
+      // Clear cached pages, and reload current page if we need the data
       this.clearCache();
     }
 

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

@@ -31,14 +31,6 @@ export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>
   Constructor<KeyboardMixinClass>;
 
 export declare class ComboBoxMixinClass<TItem> {
-  protected readonly _propertyForValue: string;
-
-  protected _inputElementValue: string | undefined;
-
-  protected _revertInputValue(): void;
-
-  protected _getItemElements(): HTMLElement[];
-
   /**
    * True if the dropdown is open, false otherwise.
    */
@@ -72,7 +64,7 @@ export declare class ComboBoxMixinClass<TItem> {
    * A full set of items to filter the visible options from.
    * The items can be of either `String` or `Object` type.
    */
-  items: Array<TItem> | undefined;
+  items: TItem[] | undefined;
 
   /**
    * If `true`, the user can input a value that is not present in the items list.
@@ -88,7 +80,7 @@ export declare class ComboBoxMixinClass<TItem> {
    * can be assigned directly to omit the internal filtering functionality.
    * The items can be of either `String` or `Object` type.
    */
-  filteredItems: Array<TItem> | undefined;
+  filteredItems: TItem[] | undefined;
 
   /**
    * The `String` value for the selected item of the combo box.
@@ -151,6 +143,10 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   invalid: boolean;
 
+  protected readonly _propertyForValue: string;
+
+  protected _inputElementValue: string | undefined;
+
   /**
    * Requests an update for the content of items.
    * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
@@ -179,4 +175,8 @@ export declare class ComboBoxMixinClass<TItem> {
    * You can override this method for custom validations.
    */
   checkValidity(): boolean;
+
+  protected _revertInputValue(): void;
+
+  protected _getItemElements(): HTMLElement[];
 }

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

@@ -971,19 +971,15 @@ export const ComboBoxMixin = (subclass) =>
           this._selectItemForValue(this.value);
         }
 
-        // Do not update `_focusedIndex` to from `-1` to old value during scroll.
-        // Otherwise, the scroll would jump back to the previously focused item.
-        if (!this.loading) {
-          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-scroller.js

@@ -259,7 +259,9 @@ export class ComboBoxScroller extends PolymerElement {
       this.requestContentUpdate();
     }
 
-    if (index >= 0) {
+    // Do not jump back to the previously focused item while loading
+    // when requesting next page from the data provider on scroll.
+    if (index >= 0 && !this.loading) {
       this.scrollIntoView(index);
     }
   }

package/theme/material/vaadin-combo-box-dropdown-styles.js

@@ -1,4 +1,5 @@
 import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
 import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';