@vaadin/vaadin-text-field - npm Package Compare versions

Comparing version 2.6.0-alpha1 to 2.6.0-alpha2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-text-field",
-  "version": "2.6.0-alpha1",
+  "version": "2.6.0-alpha2",
   "main": "vaadin-text-field.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-email-field.js

@@ -33,3 +33,3 @@ /**
   static get version() {
-    return '2.6.0-alpha1';
+    return '2.6.0-alpha2';
   }
@@ -36,0 +36,0 @@

src/vaadin-integer-field.js

@@ -36,9 +36,30 @@ /**
   static get version() {
-    return '2.6.0-alpha1';
+    return '2.6.0-alpha2';
   }
 
+  static get properties() {
+    // Hide inherited props that don't work with <input type="number"> from JSDoc.
+    return {
+      /**
+       * @private
+       */
+      pattern: String,
+      /**
+       * @private
+       */
+      preventInvalidInput: Boolean,
+      /**
+       * @private
+       */
+      minlength: Number,
+      /**
+       * @private
+       */
+      maxlength: Number
+    };
+  }
+
   ready() {
     super.ready();
-    this.inputElement.addEventListener('drop', this.__onDrop.bind(this));
-    this.inputElement.addEventListener('paste', this.__onPaste.bind(this));
+    this._enabledCharPattern = '[-+\\d]';
   }
@@ -56,30 +77,2 @@
 
-  _onKeyDown(e) {
-    if (!this.__shouldAcceptKey(e)) {
-      e.preventDefault();
-    }
-    super._onKeyDown(e);
-  }
-
-  __shouldAcceptKey(event) {
-    return (event.metaKey || event.ctrlKey)
-      || !event.key // allow typing anything if event.key is not supported
-      || event.key.length !== 1 // allow "Backspace", "ArrowLeft" etc.
-      || /^[-+\d]$/.test(event.key);
-  }
-
-  __onDrop(e) {
-    const draggedText = e.dataTransfer.getData('text');
-    if (!this.__isValidInput(draggedText)) {
-      e.preventDefault();
-    }
-  }
-
-  __onPaste(e) {
-    const pastedText = (e.clipboardData || window.clipboardData).getData('text');
-    if (!this.__isValidInput(pastedText)) {
-      e.preventDefault();
-    }
-  }
-
   _stepChanged(newVal, oldVal) {
@@ -100,6 +93,2 @@ if (!this.__hasOnlyDigits(newVal)) {
 
-  __isValidInput(value) {
-    return /^[\d+-]*$/.test(String(value));
-  }
-
   __hasOnlyDigits(value) {
@@ -106,0 +95,0 @@ return /^\d*$/.test(String(value));

src/vaadin-number-field.js

@@ -16,3 +16,3 @@ /**
     <style>
-      :host([readonly]) {
+      :host([readonly]) [part\$="button"] {
         pointer-events: none;
@@ -80,3 +80,3 @@ }
   static get version() {
-    return '2.6.0-alpha1';
+    return '2.6.0-alpha2';
   }
@@ -118,3 +118,2 @@
         type: Number,
-        reflectToAttribute: true,
         value: 1,
@@ -196,3 +195,3 @@ observer: '_stepChanged'
   _incrementValue(incr) {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
@@ -303,3 +302,8 @@ }
   _stepChanged(step) {
-    this.inputElement.step = step;
+    // Avoid using initial value in validation
+    this.__validateByStep = this.__stepChangedCalled || this.getAttribute('step') !== null;
+    this.inputElement.step = this.__validateByStep ? step : 'any';
+
+    this.__stepChangedCalled = true;
+    this.setAttribute('step', step);
   }
@@ -338,3 +342,3 @@
   __onInputChange() {
-    this.checkValidity();
+    this.validate();
   }
@@ -344,5 +348,6 @@
     // text-field mixin does not check against `min`, `max` and `step`
-    if (this.min !== undefined || this.max !== undefined || this.step !== 1) {
-      this.invalid = !this.inputElement.checkValidity();
+    if (this.min !== undefined || this.max !== undefined || this.__validateByStep) {
+      return this.inputElement.checkValidity();
     }
+
     return super.checkValidity();
@@ -349,0 +354,0 @@ }

src/vaadin-password-field.js

@@ -79,3 +79,3 @@ /**
   static get version() {
-    return '2.6.0-alpha1';
+    return '2.6.0-alpha2';
   }
@@ -82,0 +82,0 @@

src/vaadin-text-area.js

@@ -140,3 +140,3 @@ /**
   static get version() {
-    return '2.6.0-alpha1';
+    return '2.6.0-alpha2';
   }
@@ -143,0 +143,0 @@

src/vaadin-text-field-mixin.js

@@ -312,2 +312,14 @@ /**
 
+      /**
+       * A pattern matched against individual characters the user inputs.
+       * When set, the field will prevent:
+       * - `keyDown` events if the entered key doesn't match `/^_enabledCharPattern$/`
+       * - `paste` events if the pasted text doesn't match `/^_enabledCharPattern*$/`
+       * - `drop` events if the dropped text doesn't match `/^_enabledCharPattern*$/`
+       *
+       * For example, to enable entering only numbers and minus signs,
+       * `_enabledCharPattern = "[\\d-]"`
+       */
+      _enabledCharPattern: String,
+
       _labelId: String,
@@ -331,3 +343,4 @@
       '_getActiveLabelId(label, _labelId, _inputId)',
-      '__observeOffsetHeight(errorMessage, invalid, label, helperText)'
+      '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
+      '__enabledCharPatternChanged(_enabledCharPattern)'
     ];
@@ -572,2 +585,5 @@ }
     node.addEventListener('focus', this._boundOnFocus);
+    node.addEventListener('paste', this._boundOnPaste);
+    node.addEventListener('drop', this._boundOnDrop);
+    node.addEventListener('beforeinput', this._boundOnBeforeInput);
   }
@@ -580,2 +596,5 @@
     node.removeEventListener('focus', this._boundOnFocus);
+    node.removeEventListener('paste', this._boundOnPaste);
+    node.removeEventListener('drop', this._boundOnDrop);
+    node.removeEventListener('beforeinput', this._boundOnBeforeInput);
   }
@@ -592,2 +611,5 @@
     this._boundOnFocus = this._onFocus.bind(this);
+    this._boundOnPaste = this._onPaste.bind(this);
+    this._boundOnDrop = this._onDrop.bind(this);
+    this._boundOnBeforeInput = this._onBeforeInput.bind(this);
 
@@ -690,4 +712,47 @@ const defaultInput = this.shadowRoot.querySelector('[part="value"]');
     }
+
+    if (this._enabledCharPattern && !this.__shouldAcceptKey(e)) {
+      e.preventDefault();
+    }
   }
 
+  __shouldAcceptKey(event) {
+    return (event.metaKey || event.ctrlKey)
+      || !event.key // allow typing anything if event.key is not supported
+      || event.key.length !== 1 // allow "Backspace", "ArrowLeft" etc.
+      || this.__enabledCharRegExp.test(event.key);
+  }
+
+  _onPaste(e) {
+    if (this._enabledCharPattern) {
+      const pastedText = (e.clipboardData || window.clipboardData).getData('text');
+      if (!this.__enabledTextRegExp.test(pastedText)) {
+        e.preventDefault();
+      }
+    }
+  }
+
+  _onDrop(e) {
+    if (this._enabledCharPattern) {
+      const draggedText = e.dataTransfer.getData('text');
+      if (!this.__enabledTextRegExp.test(draggedText)) {
+        e.preventDefault();
+      }
+    }
+  }
+
+  _onBeforeInput(e) {
+    // The `beforeinput` event covers all the cases for `_enabledCharPattern`: keyboard, pasting and dropping,
+    // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
+    // because it seems to be the only way to detect and prevent specific keys on mobile devices. See issue #429.
+    if (this._enabledCharPattern && e.data && !this.__enabledTextRegExp.test(e.data)) {
+      e.preventDefault();
+    }
+  }
+
+  __enabledCharPatternChanged(_enabledCharPattern) {
+    this.__enabledCharRegExp = _enabledCharPattern && new RegExp('^' + _enabledCharPattern + '$');
+    this.__enabledTextRegExp = _enabledCharPattern && new RegExp('^' + _enabledCharPattern + '*$');
+  }
+
   _addIEListeners(node) {
@@ -694,0 +759,0 @@ /* istanbul ignore if */

src/vaadin-text-field.js

@@ -112,3 +112,3 @@ /**
   static get version() {
-    return '2.6.0-alpha1';
+    return '2.6.0-alpha2';
   }
@@ -115,0 +115,0 @@

theme/lumo/vaadin-text-field-styles.js

@@ -65,4 +65,4 @@ import '@vaadin/vaadin-lumo-styles/color.js';
       [part="value"]:focus,
-      [part="input-field"] ::slotted(input):focus,
-      [part="input-field"] ::slotted(textarea):focus {
+      :host([focused]) [part="input-field"] ::slotted(input),
+      :host([focused]) [part="input-field"] ::slotted(textarea) {
         -webkit-mask-image: none;
@@ -69,0 +69,0 @@ mask-image: none;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107078

increased by2.36%

Lines of code

2452

increased by2.25%

No dependency changes