@vaadin/vaadin-combo-box 5.4.11 → 5.4.13

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-combo-box",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-combo-box",
-  "version": "5.4.11",
+  "version": "5.4.13",
   "main": "vaadin-combo-box.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -25,39 +25,40 @@
     "theme"
   ],
   "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
     "type-detect": "1.0.0"
   },
   "dependencies": {
-    "@polymer/iron-a11y-announcer": "^3.0.0",
     "@polymer/iron-a11y-keys-behavior": "^3.0.0",
+    "@polymer/iron-a11y-announcer": "^3.0.0",
     "@polymer/iron-list": "^3.0.0",
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/vaadin-control-state-mixin": "^2.2.2",
-    "@vaadin/vaadin-element-mixin": "^2.4.1",
-    "@vaadin/vaadin-item": "^2.3.0",
-    "@vaadin/vaadin-lumo-styles": "^1.1.1",
-    "@vaadin/vaadin-material-styles": "^1.1.2",
     "@vaadin/vaadin-overlay": "^3.5.0",
     "@vaadin/vaadin-text-field": "^2.8.0",
-    "@vaadin/vaadin-themable-mixin": "^1.6.1"
-  },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
+    "@vaadin/vaadin-themable-mixin": "^1.6.1",
+    "@vaadin/vaadin-lumo-styles": "^1.1.1",
+    "@vaadin/vaadin-material-styles": "^1.1.2",
+    "@vaadin/vaadin-item": "^2.3.0",
+    "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
   "devDependencies": {
-    "@polymer/iron-component-page": "^4.0.0",
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/iron-form": "^3.0.0",
+    "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-test-helpers": "^3.0.0",
     "@polymer/paper-input": "^3.0.0",
     "@vaadin/vaadin-button": "^2.4.0",
+    "wct-browser-legacy": "^1.0.1",
     "@vaadin/vaadin-demo-helpers": "^3.1.0",
-    "@vaadin/vaadin-dialog": "^2.5.0",
-    "wct-browser-legacy": "^1.0.1"
+    "@vaadin/vaadin-dialog": "^2.5.0"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

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

@@ -85,6 +85,11 @@ declare class ComboBoxLightElement extends
   ready(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+
+  /**
+   * Returns true if the current input value satisfies all constraints (if any).
+   */
+  checkValidity(): boolean;
 }
 
 declare global {

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

@@ -132,6 +132,17 @@ class ComboBoxLightElement extends
     return this.getRootNode().activeElement === this.inputElement;
   }
 
+  /**
+   * Returns true if the current input value satisfies all constraints (if any).
+   * @return {boolean}
+   */
+  checkValidity() {
+    if (this.inputElement && this.inputElement.validate) {
+      return this.inputElement.validate();
+    }
+    return super.checkValidity();
+  }
+
   /** @protected */
   connectedCallback() {
     super.connectedCallback();

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

@@ -704,13 +704,19 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
       }
     } else {
       const toLowerCase = (item) => item && item.toLowerCase && item.toLowerCase();
-      const itemsMatchedByLabel = this.filteredItems
-        && this.filteredItems.filter(item => toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue))
-        || [];
+
+      // Try to find an item whose label matches the input value. A matching item is searched from
+      // the filteredItems array (if available) and the selectedItem (if available).
+      const itemMatchingByLabel = [...(this.filteredItems || []), this.selectedItem].filter((item) => {
+        return toLowerCase(this._getItemLabel(item)) === toLowerCase(this._inputElementValue);
+      })[0];
+
       if (this.allowCustomValue
         // to prevent a repetitive input value being saved after pressing ESC and Tab.
-        && !itemsMatchedByLabel.length) {
+        && !itemMatchingByLabel) {
 
+        // An item matching by label was not found, but custom values are allowed.
+        // Dispatch a custom-value-set event with the input value.
         const e = new CustomEvent('custom-value-set', {detail: this._inputElementValue, composed: true, cancelable: true, bubbles: true});
         this.dispatchEvent(e);
         if (!e.defaultPrevented) {
@@ -718,9 +724,11 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
           this._selectItemForValue(customValue);
           this.value = customValue;
         }
-      } else if (!this.allowCustomValue && !this.opened && itemsMatchedByLabel.length > 0) {
-        this.value = this._getItemValue(itemsMatchedByLabel[0]);
+      } else if (!this.allowCustomValue && !this.opened && itemMatchingByLabel) {
+        // An item matching by label was found, select it.
+        this.value = this._getItemValue(itemMatchingByLabel);
       } else {
+        // Revert the input value
         this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : (this.value || '');
       }
     }
@@ -904,6 +912,7 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
   /** @private */
   _detectAndDispatchChange() {
     if (this.value !== this._lastCommittedValue) {
+      this.validate();
       this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
       this._lastCommittedValue = this.value;
     }
@@ -1068,6 +1077,7 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
     }
     if (!this.readonly && !this._closeOnBlurIsPrevented) {
       this._closeOrCommit();
+      this.validate();
     }
   }
 
@@ -1097,8 +1107,8 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
    * @return {boolean | undefined}
    */
   checkValidity() {
-    if (this.inputElement.validate) {
-      return this.inputElement.validate();
+    if (this.inputElement.checkValidity) {
+      return this.inputElement.checkValidity();
     }
   }
 

package/src/vaadin-combo-box.js

@@ -229,7 +229,7 @@ class ComboBoxElement extends
   }
 
   static get version() {
-    return '5.4.11';
+    return '5.4.13';
   }
 
   static get properties() {
@@ -351,6 +351,13 @@ class ComboBoxElement extends
   ready() {
     super.ready();
 
+    // Disable the internal text-field's validation to prevent it from overriding
+    // the invalid state that was propagated to the text-field from the combo-box.
+    this.inputElement.validate = () => {};
+    // Restore the internal text-field's invalid state in case
+    // it got overridden before the validation was disabled above.
+    this.inputElement.invalid = this.invalid;
+
     this._nativeInput = this.inputElement.focusElement;
     this._toggleElement = this.$.toggleButton;
     this._clearElement = this.inputElement.shadowRoot.querySelector('[part="clear-button"]');