@vaadin/combo-box 23.1.0-rc1 → 23.1.0

package/package.json

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

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