@vaadin/combo-box 23.1.0-beta4 → 23.1.0-rc3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.1.0-beta4",
+  "version": "23.1.0-rc3",
   "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-beta4",
-    "@vaadin/field-base": "23.1.0-beta4",
-    "@vaadin/input-container": "23.1.0-beta4",
-    "@vaadin/item": "23.1.0-beta4",
-    "@vaadin/lit-renderer": "23.1.0-beta4",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-beta4",
-    "@vaadin/vaadin-material-styles": "23.1.0-beta4",
-    "@vaadin/vaadin-overlay": "23.1.0-beta4",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-beta4"
+    "@vaadin/component-base": "23.1.0-rc3",
+    "@vaadin/field-base": "23.1.0-rc3",
+    "@vaadin/input-container": "23.1.0-rc3",
+    "@vaadin/item": "23.1.0-rc3",
+    "@vaadin/lit-renderer": "23.1.0-rc3",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-rc3",
+    "@vaadin/vaadin-material-styles": "23.1.0-rc3",
+    "@vaadin/vaadin-overlay": "23.1.0-rc3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-rc3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "23.1.0-beta4",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-beta4",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-rc3",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.1.0-beta4",
+    "@vaadin/text-field": "23.1.0-rc3",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "06e283473964ecb3085aacf3eddb5333d052a045"
+  "gitHead": "49c312fbe0228adb559296d45655bbfd4eac6235"
 }

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-dropdown.js

@@ -48,7 +48,6 @@ export class ComboBoxDropdown extends PolymerElement {
        */
       positionTarget: {
         type: Object,
-        observer: '_positionTargetChanged',
       },
 
       /**
@@ -185,8 +184,6 @@ export class ComboBoxDropdown extends PolymerElement {
 
   _openedChanged(opened, wasOpened) {
     if (opened) {
-      this._setOverlayWidth();
-
       this._scroller.style.maxHeight =
         getComputedStyle(this).getPropertyValue(`--${this.__hostTagName}-overlay-max-height`) || '65vh';
 
@@ -274,32 +271,6 @@ export class ComboBoxDropdown extends PolymerElement {
     return !this.loading && !(this._items && this._items.length);
   }
 
-  _positionTargetChanged(target) {
-    // We must update the overlay width when the positionTarget is set (or changes)
-    if (target) {
-      this._setOverlayWidth();
-    }
-  }
-
-  _setOverlayWidth() {
-    if (!this.positionTarget) {
-      return;
-    }
-    const inputWidth = `${this.positionTarget.clientWidth}px`;
-    const propPrefix = `${this.__hostTagName}-overlay`;
-    const customWidth = getComputedStyle(this).getPropertyValue(`--${propPrefix}-width`);
-
-    this.$.overlay.style.setProperty(`--_${propPrefix}-default-width`, inputWidth);
-
-    if (customWidth === '') {
-      this.$.overlay.style.removeProperty(`--${propPrefix}-width`);
-    } else {
-      this.$.overlay.style.setProperty(`--${propPrefix}-width`, customWidth);
-    }
-
-    this.$.overlay._updatePosition();
-  }
-
   /**
    * Fired after the `vaadin-combo-box-dropdown` opens.
    *

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

@@ -107,7 +107,7 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
   }
 
   /**
-   * Used by `ClearButtonMixin` as a reference to the clear button element.
+   * Used by `InputControlMixin` as a reference to the clear button element.
    * @protected
    * @return {!HTMLElement}
    */

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

@@ -423,12 +423,29 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * @param {Event} event
+     * @private
+     */
+    _onToggleButtonClick(event) {
+      // Prevent parent components such as `vaadin-grid`
+      // from handling the click event after it bubbles.
+      event.preventDefault();
+
+      if (this.opened) {
+        this.close();
+      } else {
+        this.open();
+      }
+    }
+
     /**
      * @param {Event} event
      * @protected
      */
-    _onHostClick(_event) {
+    _onHostClick(event) {
       if (!this.autoOpenDisabled) {
+        event.preventDefault();
         this.open();
       }
     }
@@ -442,11 +459,7 @@ export const ComboBoxMixin = (subclass) =>
       if (this._isClearButton(e)) {
         this._handleClearButtonClick(e);
       } else if (path.indexOf(this._toggleElement) > -1) {
-        if (this.opened) {
-          this.close();
-        } else {
-          this.open();
-        }
+        this._onToggleButtonClick(e);
       } else {
         this._onHostClick(e);
       }
@@ -456,12 +469,14 @@ export const ComboBoxMixin = (subclass) =>
 
     /**
      * Override an event listener from `KeyboardMixin`.
-     * Do not call `super` to also override a listener
-     * for Esc key defined in `ClearButtonMixin`.
+     *
+     * @param {KeyboardEvent} e
      * @protected
      * @override
      */
     _onKeyDown(e) {
+      super._onKeyDown(e);
+
       if (e.key === 'Tab') {
         this.__restoreFocusOnClose = false;
       } else if (e.key === 'ArrowDown') {
@@ -478,10 +493,6 @@ export const ComboBoxMixin = (subclass) =>
 
         // Prevent caret from moving
         e.preventDefault();
-      } else if (e.key === 'Enter') {
-        this._onEnter(e);
-      } else if (e.key === 'Escape') {
-        this._onEscape(e);
       }
     }
 
@@ -574,7 +585,13 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /** @private */
+    /**
+     * Override an event listener from `KeyboardMixin`.
+     *
+     * @param {KeyboardEvent} e
+     * @protected
+     * @override
+     */
     _onEnter(e) {
       // Do not commit value when custom values are disallowed and input value is not a valid option
       // also stop propagation of the event, otherwise the user could submit a form while the input
@@ -600,8 +617,13 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /**
+     * Override an event listener from `KeyboardMixin`.
+     * Do not call `super` in order to override clear
+     * button logic defined in `InputControlMixin`.
+     *
      * @param {!KeyboardEvent} e
      * @protected
+     * @override
      */
     _onEscape(e) {
       if (this.autoOpenDisabled) {

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

@@ -45,11 +45,17 @@ export class ComboBoxOverlay extends PositionMixin(OverlayElement) {
     return memoizedTemplate;
   }
 
+  static get observers() {
+    return ['_setOverlayWidth(positionTarget, opened)'];
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
     const dropdown = this.__dataHost;
     const comboBox = dropdown && dropdown.getRootNode().host;
+    this._comboBox = comboBox;
+
     const hostDir = comboBox && comboBox.getAttribute('dir');
     if (hostDir) {
       this.setAttribute('dir', hostDir);
@@ -70,6 +76,23 @@ export class ComboBoxOverlay extends PositionMixin(OverlayElement) {
       this.close();
     }
   }
+
+  _setOverlayWidth(positionTarget, opened) {
+    if (positionTarget && opened) {
+      const propPrefix = this.localName;
+      this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
+
+      const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
+
+      if (customWidth === '') {
+        this.style.removeProperty(`--${propPrefix}-width`);
+      } else {
+        this.style.setProperty(`--${propPrefix}-width`, customWidth);
+      }
+
+      this._updatePosition();
+    }
+  }
 }
 
 customElements.define(ComboBoxOverlay.is, ComboBoxOverlay);

package/src/vaadin-combo-box.js

@@ -224,7 +224,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
   }
 
   /**
-   * Used by `ClearButtonMixin` as a reference to the clear button element.
+   * Used by `InputControlMixin` as a reference to the clear button element.
    * @protected
    * @return {!HTMLElement}
    */
@@ -282,7 +282,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
   }
 
   /**
-   * Override method inherited from `ClearButtonMixin` to handle clear
+   * Override method inherited from `InputControlMixin` to handle clear
    * button click and stop event from propagating to the host element.
    * @param {Event} event
    * @protected

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';