@vaadin/vaadin-combo-box 5.4.11 → 5.5.0

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.5.0",
   "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-mixin.d.ts

@@ -122,6 +122,11 @@ interface ComboBoxMixin {
    */
   selectedItem: ComboBoxItem|string|null|undefined;
 
+  /**
+   * Whether the input element has a non-empty value.
+   */
+  _hasInputValue: boolean|null|undefined;
+
   /**
    * Path for label of the item. If `items` is an array of objects, the
    * `itemLabelPath` is used to fetch the displayed string label for each
@@ -201,10 +206,19 @@ interface ComboBoxMixin {
    * Filtering and items handling
    */
   _inputValueChanged(e: Event): void;
+  _inputElementValueChanged(inputElementValue: any): void;
   _revertInputValue(): void;
+  _setInvalid(invalid: boolean): void;
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Override this method to define whether the given `invalid` state should be set.
+   */
+  _shouldSetInvalid(_invalid: boolean): boolean;
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
    *
    * @returns True if the value is valid and sets the `invalid` flag appropriately
    */

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

@@ -166,6 +166,16 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
         notify: true
       },
 
+      /**
+       * Whether the input element has a non-empty value.
+       * @protected
+       */
+      _hasInputValue: {
+        type: Boolean,
+        value: false,
+        observer: '_hasInputValueChanged',
+      },
+
       /**
        * Path for label of the item. If `items` is an array of objects, the
        * `itemLabelPath` is used to fetch the displayed string label for each
@@ -261,7 +271,8 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
       '_templateOrRendererChanged(_itemTemplate, renderer)',
       '_loadingChanged(loading)',
       '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-      '_toggleElementChanged(_toggleElement)'
+      '_toggleElementChanged(_toggleElement)',
+      '_inputElementValueChanged(_inputElementValue)'
     ];
   }
 
@@ -632,6 +643,7 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
     this.selectedItem = null;
 
     if (this.allowCustomValue) {
+      this._inputElementValue = '';
       this.value = '';
     }
 
@@ -704,13 +716,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 +736,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 || '');
       }
     }
@@ -755,6 +775,10 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
     }
   }
 
+  _inputElementValueChanged(inputElementValue) {
+    this._hasInputValue = inputElementValue != null ? inputElementValue.length > 0 : false;
+  }
+
   /** @private */
   _filterFromInput(e) {
     if (!this.opened && !e.__fromClearButton && !this.autoOpenDisabled) {
@@ -1082,12 +1106,49 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
   }
 
   /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
+   * Observer to notify about the change of private property.
+   *
+   * @private
+   */
+  _hasInputValueChanged(hasValue, oldHasValue) {
+    if (hasValue || oldHasValue) {
+      this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+    }
+  }
+
+  /**
+   * @param {boolean} invalid
+   * @protected
+   */
+  _setInvalid(invalid) {
+    if (this._shouldSetInvalid(invalid)) {
+      this.invalid = invalid;
+    }
+  }
+
+  /**
+   * Override this method to define whether the given `invalid` state should be set.
+   *
+   * @param {boolean} _invalid
+   * @return {boolean}
+   * @protected
+   */
+  _shouldSetInvalid(_invalid) {
+    return true;
+  }
+
+  /**
+   * Validates the field and sets the `invalid` property based on the result.
+   *
+   * The method fires a `validated` event with the result of the validation.
    *
    * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
    */
   validate() {
-    return !(this.invalid = !this.checkValidity());
+    const isValid = this.checkValidity();
+    this._setInvalid(!isValid);
+    this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+    return isValid;
   }
 
   /**
@@ -1198,4 +1259,12 @@ export const ComboBoxMixin = subclass => class VaadinComboBoxMixinElement extend
    * To comply with https://developer.mozilla.org/en-US/docs/Web/Events/change
    * @event change
    */
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 };

package/src/vaadin-combo-box.js

@@ -229,7 +229,7 @@ class ComboBoxElement extends
   }
 
   static get version() {
-    return '5.4.11';
+    return '5.5.0';
   }
 
   static get properties() {