@vaadin/vaadin-text-field 2.9.2 → 2.10.0

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-text-field",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-text-field",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "main": "vaadin-text-field.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

package/src/vaadin-email-field.js

@@ -63,7 +63,7 @@ class EmailFieldElement extends TextFieldElement {
   }
 
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
 
   static get template() {

package/src/vaadin-integer-field.js

@@ -32,7 +32,7 @@ class IntegerFieldElement extends NumberFieldElement {
   }
 
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
 
   static get properties() {

package/src/vaadin-number-field.d.ts

@@ -49,6 +49,15 @@ declare class NumberFieldElement extends TextFieldElement {
   step: number;
   ready(): void;
   _createConstraintsObserver(): void;
+
+  /**
+   * Native [type=number] inputs don't update their value
+   * when you are entering input that the browser is unable to parse
+   * e.g. "--5", hence we have to override this method from `InputMixin`
+   * so that, when value is empty, it would additionally check
+   * for bad input based on the native `validity.badInput` property.
+   */
+  _setHasInputValue(event: InputEvent|null): void;
   _valueChanged(newVal: unknown|null, oldVal: unknown|null): void;
   checkValidity(): boolean;
   _onKeyDown(e: KeyboardEvent): void;

package/src/vaadin-number-field.js

@@ -105,7 +105,7 @@ class NumberFieldElement extends TextFieldElement {
   }
 
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
 
   static get properties() {
@@ -279,7 +279,7 @@ class NumberFieldElement extends TextFieldElement {
 
   /** @private */
   _setValue(value) {
-    this.value = this.inputElement.value = String(parseFloat(value));
+    this.value = this._inputElementValue = String(parseFloat(value));
     this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
   }
 
@@ -411,6 +411,21 @@ class NumberFieldElement extends TextFieldElement {
 
     return super.checkValidity();
   }
+
+  /**
+   * Native [type=number] inputs don't update their value
+   * when you are entering input that the browser is unable to parse
+   * e.g. "--5", hence we have to override this method from `InputMixin`
+   * so that, when value is empty, it would additionally check
+   * for bad input based on the native `validity.badInput` property.
+   *
+   * @param {InputEvent} event
+   * @protected
+   * @override
+   */
+  _setHasInputValue(event) {
+    this._hasInputValue = event.target.value.length > 0 || event.target.validity.badInput;
+  }
 }
 
 window.customElements.define(NumberFieldElement.is, NumberFieldElement);

package/src/vaadin-password-field.js

@@ -76,7 +76,7 @@ class PasswordFieldElement extends TextFieldElement {
   }
 
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
 
   static get properties() {

package/src/vaadin-text-area.js

@@ -149,7 +149,7 @@ class TextAreaElement extends
   }
 
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
 
   static get properties() {
@@ -275,13 +275,13 @@ class TextAreaElement extends
     // according to WHATWG spec for <input>, with tests inspired by web-platform-tests
     // https://html.spec.whatwg.org/multipage/input.html#the-pattern-attribute
 
-    if (!this.pattern || !this.inputElement.value) {
+    if (!this.pattern || !this._inputElementValue) {
       // Mark as valid if there is no pattern, or the value is empty
       return true;
     }
 
     try {
-      const match = this.inputElement.value.match(this.pattern);
+      const match = this._inputElementValue.match(this.pattern);
       return match ? match[0] === match.input : false;
     } catch (_) {
       // If the pattern can not be compiled, then report as valid

package/src/vaadin-text-field-mixin.d.ts

@@ -33,6 +33,18 @@ interface TextFieldMixin {
   readonly inputElement: HTMLElement|null|undefined;
   readonly _slottedTagName: string;
 
+  /**
+   * A property for accessing the input element's value.
+   *
+   * Override this getter if the property is different from the default `value` one.
+   */
+  readonly _inputElementValueProperty: string;
+
+  /**
+   * The input element's value.
+   */
+  _inputElementValue: string;
+
   /**
    * Whether the value of the control can be automatically completed by the browser.
    * List of available options at:
@@ -137,6 +149,11 @@ interface TextFieldMixin {
    */
   value: string;
 
+  /**
+   * Whether the input element has a non-empty value.
+   */
+  _hasInputValue: boolean|null|undefined;
+
   /**
    * This property is set to true when the control value is invalid.
    */
@@ -167,6 +184,11 @@ interface TextFieldMixin {
    */
   _enabledCharPattern: string|null|undefined;
   _createConstraintsObserver(): void;
+
+  /**
+   * Sets the `_hasInputValue` property based on the `input` event.
+   */
+  _setHasInputValue(event: InputEvent|null): void;
   _onChange(e: Event): void;
   _valueChanged(newVal: unknown|null, oldVal: unknown|null): void;
   _constraintsChanged(required: boolean|undefined, minlength: number|undefined, maxlength: string|undefined, pattern: any): void;
@@ -176,10 +198,17 @@ interface TextFieldMixin {
    */
   checkValidity(): boolean;
   ready(): void;
+  _setInvalid(invalid: boolean): void;
 
   /**
-   * Returns true if `value` is valid.
-   * `<iron-form>` uses this to check the validity for all its elements.
+   * 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.
    */

package/src/vaadin-text-field-mixin.js

@@ -292,6 +292,17 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
         notify: true
       },
 
+      /**
+       * Whether the input element has a non-empty value.
+       *
+       * @protected
+       */
+      _hasInputValue: {
+        type: Boolean,
+        value: false,
+        observer: '_hasInputValueChanged',
+      },
+
       /**
        * This property is set to true when the control value is invalid.
        * @type {boolean}
@@ -402,6 +413,61 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
     this._createMethodObserver('_constraintsChanged(required, minlength, maxlength, pattern)');
   }
 
+  /**
+   * A property for accessing the input element's value.
+   *
+   * Override this getter if the property is different from the default `value` one.
+   *
+   * @protected
+   * @return {string}
+   */
+  get _inputElementValueProperty() {
+    return 'value';
+  }
+
+  /**
+   * The input element's value.
+   *
+   * @protected
+   * @return {string}
+   */
+  get _inputElementValue() {
+    return this.inputElement ? this.inputElement[this._inputElementValueProperty] : undefined;
+  }
+
+  /**
+   * The input element's value.
+   *
+   * @protected
+   */
+  set _inputElementValue(value) {
+    if (this.inputElement) {
+      this.inputElement[this._inputElementValueProperty] = value;
+    }
+  }
+
+  /**
+   * Sets the `_hasInputValue` property based on the `input` event.
+   *
+   * @param {InputEvent} event
+   * @protected
+   */
+  _setHasInputValue(event) {
+    this._hasInputValue = event.target.value.length > 0;
+  }
+
+  /**
+   * An input event listener used to update `_hasInputValue` property.
+   * Do not override this method.
+   *
+   * @param {Event} event
+   * @private
+   */
+  __onInput(event) {
+    this._setHasInputValue(event);
+    this._onInput(event);
+  }
+
   /** @private */
   _onInput(e) {
     if (this.__preventInput) {
@@ -448,6 +514,17 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
     }
   }
 
+  /**
+   * 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 {!Event} e
    * @protected
@@ -489,9 +566,9 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
     if (this.__userInput) {
       return;
     } else if (newVal !== undefined) {
-      this.inputElement.value = newVal;
+      this._inputElementValue = newVal;
     } else {
-      this.value = this.inputElement.value = '';
+      this.value = this._inputElementValue = '';
     }
 
     if (this.invalid) {
@@ -534,7 +611,7 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
     const slotted = this.querySelector(`${this._slottedTagName}[slot="${this._slottedTagName}"]`);
 
     if (this.value) {
-      this.inputElement.value = this.value;
+      this._inputElementValue = this.value;
       this.validate();
     }
 
@@ -614,7 +691,7 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
     }
 
     if (!required && !minlength && !maxlength && !pattern) {
-      this.invalid = false;
+      this._setInvalid(false);
     } else {
       this.validate();
     }
@@ -662,7 +739,7 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
 
     this._createConstraintsObserver();
 
-    this._boundOnInput = this._onInput.bind(this);
+    this._boundOnInput = this.__onInput.bind(this);
     this._boundOnChange = this._onChange.bind(this);
     this._boundOnBlur = this._onBlur.bind(this);
     this._boundOnFocus = this._onFocus.bind(this);
@@ -709,16 +786,42 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
   }
 
   /**
-   * Returns true if `value` is valid.
-   * `<iron-form>` uses this to check the validity for all its elements.
+   * @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.
    */
   validate() {
-    return !(this.invalid = !this.checkValidity());
+    const isValid = this.checkValidity();
+    this._setInvalid(!isValid);
+    this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
+    return isValid;
   }
 
   clear() {
+    this._hasInputValue = false;
     this.value = '';
   }
 
@@ -955,4 +1058,12 @@ export const TextFieldMixin = subclass => class VaadinTextFieldMixin extends sub
    *
    * @event iron-resize
    */
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 };

package/src/vaadin-text-field.js

@@ -116,7 +116,7 @@ class TextFieldElement extends
   }
 
   static get version() {
-    return '2.9.2';
+    return '2.10.0';
   }
 
   static get properties() {