@vaadin/field-base 24.6.0-alpha6 → 24.6.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.6.0-alpha6",
+  "version": "24.6.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -32,14 +32,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.6.0-alpha6",
-    "@vaadin/component-base": "24.6.0-alpha6",
+    "@vaadin/a11y-base": "24.6.0-alpha8",
+    "@vaadin/component-base": "24.6.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha6",
+    "@vaadin/chai-plugins": "24.6.0-alpha8",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "53f2f0c6cb9324a832ee7c0a052db927e151e167"
+  "gitHead": "a11e1510c4caa08775b202714f5fc1198c22132a"
 }

package/src/input-constraints-mixin.js

@@ -90,8 +90,8 @@ export const InputConstraintsMixin = dedupingMixin(
         const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
 
         if ((this._hasValue || this.invalid) && hasConstraints) {
-          this.validate();
-        } else if (isLastConstraintRemoved) {
+          this._requestValidation();
+        } else if (isLastConstraintRemoved && !this.manualValidation) {
           this._setInvalid(false);
         }
 
@@ -109,7 +109,7 @@ export const InputConstraintsMixin = dedupingMixin(
       _onChange(event) {
         event.stopPropagation();
 
-        this.validate();
+        this._requestValidation();
 
         this.dispatchEvent(
           new CustomEvent('change', {

package/src/input-field-mixin.js

@@ -97,7 +97,7 @@ export const InputFieldMixin = (superclass) =>
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
       if (!focused && document.hasFocus()) {
-        this.validate();
+        this._requestValidation();
       }
     }
 
@@ -112,7 +112,7 @@ export const InputFieldMixin = (superclass) =>
       super._onInput(event);
 
       if (this.invalid) {
-        this.validate();
+        this._requestValidation();
       }
     }
 
@@ -133,7 +133,7 @@ export const InputFieldMixin = (superclass) =>
       }
 
       if (this.invalid) {
-        this.validate();
+        this._requestValidation();
       }
     }
   };

package/src/validate-mixin.d.ts

@@ -16,6 +16,19 @@ export declare class ValidateMixinClass {
    */
   invalid: boolean;
 
+  /**
+   * Set to true to enable manual validation mode. This mode disables automatic
+   * constraint validation, allowing you to control the validation process yourself.
+   * You can still trigger constraint validation manually with the `validate()` method
+   * or use `checkValidity()` to assess the component's validity without affecting
+   * the invalid state. In manual validation mode, you can also manipulate
+   * the `invalid` property directly through your application logic without conflicts
+   * with the component's internal validation.
+   *
+   * @attr {boolean} manual-validation
+   */
+  manualValidation: boolean;
+
   /**
    * Specifies that the user must fill in a value.
    */
@@ -30,4 +43,6 @@ export declare class ValidateMixinClass {
    * Returns true if the field value satisfies all constraints (if any).
    */
   checkValidity(): boolean;
+
+  protected _requestValidation(): void;
 }

package/src/validate-mixin.js

@@ -25,6 +25,22 @@ export const ValidateMixin = dedupingMixin(
             value: false,
           },
 
+          /**
+           * Set to true to enable manual validation mode. This mode disables automatic
+           * constraint validation, allowing you to control the validation process yourself.
+           * You can still trigger constraint validation manually with the `validate()` method
+           * or use `checkValidity()` to assess the component's validity without affecting
+           * the invalid state. In manual validation mode, you can also manipulate
+           * the `invalid` property directly through your application logic without conflicts
+           * with the component's internal validation.
+           *
+           * @attr {boolean} manual-validation
+           */
+          manualValidation: {
+            type: Boolean,
+            value: false,
+          },
+
           /**
            * Specifies that the user must fill in a value.
            */
@@ -79,6 +95,14 @@ export const ValidateMixin = dedupingMixin(
         return true;
       }
 
+      /** @protected */
+      _requestValidation() {
+        if (!this.manualValidation) {
+          // eslint-disable-next-line no-restricted-syntax
+          this.validate();
+        }
+      }
+
       /**
        * Fired whenever the field is validated.
        *