@tanstack/react-form 0.0.10 → 0.0.11

package/build/umd/index.development.js

@@ -49,11 +49,14 @@
    */
   class Store {
     listeners = new Set();
-    batching = false;
-    queue = [];
+    #batching = false;
+    #flushing = 0;
     constructor(initialState, options) {
       this.state = initialState;
       this.options = options;
+      if (this.options?.onUpdate) {
+        this.subscribe(this.options?.onUpdate);
+      }
     }
     subscribe = listener => {
       this.listeners.add(listener);
@@ -66,22 +69,21 @@
     setState = updater => {
       const previous = this.state;
       this.state = this.options?.updateFn ? this.options.updateFn(previous)(updater) : updater(previous);
-      if (this.state === previous) return;
-      this.options?.onUpdate?.(this.state, previous);
-      this.queue.push(() => {
-        this.listeners.forEach(listener => listener(this.state, previous));
-      });
       this.#flush();
     };
     #flush = () => {
-      if (this.batching) return;
-      this.queue.forEach(cb => cb());
-      this.queue = [];
+      if (this.#batching) return;
+      const flushId = ++this.#flushing;
+      this.listeners.forEach(listener => {
+        if (this.#flushing !== flushId) return;
+        listener();
+      });
     };
     batch = cb => {
-      this.batching = true;
+      if (this.#batching) return cb();
+      this.#batching = true;
       cb();
-      this.batching = false;
+      this.#batching = false;
       this.#flush();
     };
   }
@@ -97,6 +99,75 @@
    * @license MIT
    */
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  function _classPrivateFieldGet(receiver, privateMap) {
+    var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get");
+
+    return _classApplyDescriptorGet(receiver, descriptor);
+  }
+
+  function _classPrivateFieldSet(receiver, privateMap, value) {
+    var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set");
+
+    _classApplyDescriptorSet(receiver, descriptor, value);
+
+    return value;
+  }
+
+  function _classExtractFieldDescriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+      throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+
+    return privateMap.get(receiver);
+  }
+
+  function _classApplyDescriptorGet(receiver, descriptor) {
+    if (descriptor.get) {
+      return descriptor.get.call(receiver);
+    }
+
+    return descriptor.value;
+  }
+
+  function _classApplyDescriptorSet(receiver, descriptor, value) {
+    if (descriptor.set) {
+      descriptor.set.call(receiver, value);
+    } else {
+      if (!descriptor.writable) {
+        throw new TypeError("attempted to set read only private field");
+      }
+
+      descriptor.value = value;
+    }
+  }
+
+  function _checkPrivateRedeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+      throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+  }
+
+  function _classPrivateFieldInitSpec(obj, privateMap, value) {
+    _checkPrivateRedeclaration(obj, privateMap);
+
+    privateMap.set(obj, value);
+  }
+
   function functionalUpdate(updater, input) {
     return typeof updater === 'function' ? updater(input) : updater;
   }
@@ -191,14 +262,24 @@
 
   class FormApi {
     // // This carries the context for nested fields
+    // Do not use __state directly, as it is not reactive.
+    // Please use form.useStore() utility to subscribe to state
     constructor(_opts) {
       var _opts$defaultValues, _opts$defaultState;
 
-      this.options = {};
-      this.fieldInfo = {};
-      this.validationMeta = {};
+      _defineProperty(this, "options", {});
+
+      _defineProperty(this, "store", void 0);
+
+      _defineProperty(this, "state", void 0);
+
+      _defineProperty(this, "fieldInfo", {});
 
-      this.update = options => {
+      _defineProperty(this, "fieldName", void 0);
+
+      _defineProperty(this, "validationMeta", {});
+
+      _defineProperty(this, "update", options => {
         if (!options) return;
         this.store.batch(() => {
           if (options.defaultState && options.defaultState !== this.options.defaultState) {
@@ -208,17 +289,15 @@
           }
 
           if (options.defaultValues !== this.options.defaultValues) {
-            this.store.setState(prev => ({ ...prev,
-              values: options.defaultValues
-            }));
+            this.store.setState(() => getDefaultFormState(options.defaultValues));
           }
         });
         this.options = options;
-      };
+      });
 
-      this.reset = () => this.store.setState(() => getDefaultFormState(this.options.defaultValues));
+      _defineProperty(this, "reset", () => this.store.setState(() => getDefaultFormState(this.options.defaultValues)));
 
-      this.validateAllFields = async () => {
+      _defineProperty(this, "validateAllFields", async cause => {
         const fieldValidationPromises = [];
         this.store.batch(() => {
           void Object.values(this.fieldInfo).forEach(field => {
@@ -230,71 +309,15 @@
                   isTouched: true
                 })); // Validate the field
 
-                if (instance.options.validate) {
-                  fieldValidationPromises.push(instance.validate());
-                }
+                fieldValidationPromises.push(Promise.resolve().then(() => instance.validate(cause)));
               }
             });
           });
         });
         return Promise.all(fieldValidationPromises);
-      };
-
-      this.validateForm = async () => {
-        const {
-          validate
-        } = this.options;
-
-        if (!validate) {
-          return;
-        } // Use the formValidationCount for all field instances to
-        // track freshness of the validation
-
-
-        this.store.setState(prev => ({ ...prev,
-          isValidating: true,
-          formValidationCount: prev.formValidationCount + 1
-        }));
-        const formValidationCount = this.state.formValidationCount;
-
-        const checkLatest = () => formValidationCount === this.state.formValidationCount;
-
-        if (!this.validationMeta.validationPromise) {
-          this.validationMeta.validationPromise = new Promise((resolve, reject) => {
-            this.validationMeta.validationResolve = resolve;
-            this.validationMeta.validationReject = reject;
-          });
-        }
-
-        const doValidation = async () => {
-          try {
-            const error = await validate(this.state.values, this);
-
-            if (checkLatest()) {
-              var _this$validationMeta$, _this$validationMeta;
-
-              this.store.setState(prev => ({ ...prev,
-                isValidating: false,
-                error: error ? typeof error === 'string' ? error : 'Invalid Form Values' : null
-              }));
-              (_this$validationMeta$ = (_this$validationMeta = this.validationMeta).validationResolve) == null ? void 0 : _this$validationMeta$.call(_this$validationMeta, error);
-            }
-          } catch (err) {
-            if (checkLatest()) {
-              var _this$validationMeta$2, _this$validationMeta2;
-
-              (_this$validationMeta$2 = (_this$validationMeta2 = this.validationMeta).validationReject) == null ? void 0 : _this$validationMeta$2.call(_this$validationMeta2, err);
-            }
-          } finally {
-            delete this.validationMeta.validationPromise;
-          }
-        };
-
-        doValidation();
-        return this.validationMeta.validationPromise;
-      };
+      });
 
-      this.handleSubmit = async e => {
+      _defineProperty(this, "handleSubmit", async e => {
         e.preventDefault();
         e.stopPropagation(); // Check to see that the form and all fields have been touched
         // If they have not, touch them all and run validation
@@ -320,32 +343,31 @@
         }; // Validate all fields
 
 
-        await this.validateAllFields(); // Fields are invalid, do not submit
+        await this.validateAllFields('submit'); // Fields are invalid, do not submit
 
         if (!this.state.isFieldsValid) {
-          var _this$options$onInval, _this$options;
+          var _this$options$onSubmi, _this$options;
 
           done();
-          (_this$options$onInval = (_this$options = this.options).onInvalidSubmit) == null ? void 0 : _this$options$onInval.call(_this$options, this.state.values, this);
+          (_this$options$onSubmi = (_this$options = this.options).onSubmitInvalid) == null ? void 0 : _this$options$onSubmi.call(_this$options, this.state.values, this);
           return;
         } // Run validation for the form
+        // await this.validateForm()
 
 
-        await this.validateForm();
-
         if (!this.state.isValid) {
-          var _this$options$onInval2, _this$options2;
+          var _this$options$onSubmi2, _this$options2;
 
           done();
-          (_this$options$onInval2 = (_this$options2 = this.options).onInvalidSubmit) == null ? void 0 : _this$options$onInval2.call(_this$options2, this.state.values, this);
+          (_this$options$onSubmi2 = (_this$options2 = this.options).onSubmitInvalid) == null ? void 0 : _this$options$onSubmi2.call(_this$options2, this.state.values, this);
           return;
         }
 
         try {
-          var _this$options$onSubmi, _this$options3;
+          var _this$options$onSubmi3, _this$options3;
 
           // Run the submit code
-          await ((_this$options$onSubmi = (_this$options3 = this.options).onSubmit) == null ? void 0 : _this$options$onSubmi.call(_this$options3, this.state.values, this));
+          await ((_this$options$onSubmi3 = (_this$options3 = this.options).onSubmit) == null ? void 0 : _this$options$onSubmi3.call(_this$options3, this.state.values, this));
           this.store.batch(() => {
             this.store.setState(prev => ({ ...prev,
               isSubmitted: true
@@ -356,23 +378,23 @@
           done();
           throw err;
         }
-      };
+      });
 
-      this.getFieldValue = field => getBy(this.state.values, field);
+      _defineProperty(this, "getFieldValue", field => getBy(this.state.values, field));
 
-      this.getFieldMeta = field => {
+      _defineProperty(this, "getFieldMeta", field => {
         return this.state.fieldMeta[field];
-      };
+      });
 
-      this.getFieldInfo = field => {
+      _defineProperty(this, "getFieldInfo", field => {
         var _this$fieldInfo;
 
         return (_this$fieldInfo = this.fieldInfo)[field] || (_this$fieldInfo[field] = {
           instances: {}
         });
-      };
+      });
 
-      this.setFieldMeta = (field, updater) => {
+      _defineProperty(this, "setFieldMeta", (field, updater) => {
         this.store.setState(prev => {
           return { ...prev,
             fieldMeta: { ...prev.fieldMeta,
@@ -380,85 +402,76 @@
             }
           };
         });
-      };
-
-      this.setFieldValue = (field, updater, opts) => {
-        var _opts$touch;
+      });
 
-        const touch = (_opts$touch = opts == null ? void 0 : opts.touch) != null ? _opts$touch : true;
+      _defineProperty(this, "setFieldValue", (field, updater, opts) => {
+        const touch = opts == null ? void 0 : opts.touch;
         this.store.batch(() => {
-          this.store.setState(prev => {
-            return { ...prev,
-              values: setBy(prev.values, field, updater)
-            };
-          });
-
           if (touch) {
             this.setFieldMeta(field, prev => ({ ...prev,
               isTouched: true
             }));
           }
+
+          this.store.setState(prev => {
+            return { ...prev,
+              values: setBy(prev.values, field, updater)
+            };
+          });
         });
-      };
+      });
 
-      this.pushFieldValue = (field, value, opts) => {
+      _defineProperty(this, "pushFieldValue", (field, value, opts) => {
         return this.setFieldValue(field, prev => [...(Array.isArray(prev) ? prev : []), value], opts);
-      };
+      });
 
-      this.insertFieldValue = (field, index, value, opts) => {
+      _defineProperty(this, "insertFieldValue", (field, index, value, opts) => {
         this.setFieldValue(field, prev => {
-          // invariant( // TODO: bring in invariant
-          //   Array.isArray(prev),
-          //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
-          // )
           return prev.map((d, i) => i === index ? value : d);
         }, opts);
-      };
+      });
 
-      this.removeFieldValue = (field, index, opts) => {
+      _defineProperty(this, "removeFieldValue", (field, index, opts) => {
         this.setFieldValue(field, prev => {
-          // invariant( // TODO: bring in invariant
-          //   Array.isArray(prev),
-          //   `Cannot insert a field value into a non-array field. Check that this field's existing value is an array: ${field}.`
-          // )
           return prev.filter((_d, i) => i !== index);
         }, opts);
-      };
+      });
 
-      this.swapFieldValues = (field, index1, index2) => {
+      _defineProperty(this, "swapFieldValues", (field, index1, index2) => {
         this.setFieldValue(field, prev => {
           const prev1 = prev[index1];
           const prev2 = prev[index2];
           return setBy(setBy(prev, [index1], prev2), [index2], prev1);
         });
-      };
+      });
 
       this.store = new Store(getDefaultFormState({ ...(_opts == null ? void 0 : _opts.defaultState),
         values: (_opts$defaultValues = _opts == null ? void 0 : _opts.defaultValues) != null ? _opts$defaultValues : _opts == null ? void 0 : (_opts$defaultState = _opts.defaultState) == null ? void 0 : _opts$defaultState.values,
-        isFormValid: !(_opts != null && _opts.validate)
+        isFormValid: true
       }), {
-        onUpdate: next => {
-          // Computed state
-          const fieldMetaValues = Object.values(next.fieldMeta);
+        onUpdate: () => {
+          let {
+            state
+          } = this.store; // Computed state
+
+          const fieldMetaValues = Object.values(state.fieldMeta);
           const isFieldsValidating = fieldMetaValues.some(field => field == null ? void 0 : field.isValidating);
           const isFieldsValid = !fieldMetaValues.some(field => field == null ? void 0 : field.error);
           const isTouched = fieldMetaValues.some(field => field == null ? void 0 : field.isTouched);
-          const isValidating = isFieldsValidating || next.isFormValidating;
-          const isFormValid = !next.formError;
+          const isValidating = isFieldsValidating || state.isFormValidating;
+          const isFormValid = !state.formError;
           const isValid = isFieldsValid && isFormValid;
-          const canSubmit = next.submissionAttempts === 0 && !isTouched || !isValidating && !next.isSubmitting && isValid;
-          next = { ...next,
+          const canSubmit = state.submissionAttempts === 0 && !isTouched || !isValidating && !state.isSubmitting && isValid;
+          state = { ...state,
             isFieldsValidating,
             isFieldsValid,
             isFormValid,
             isValid,
             canSubmit,
             isTouched
-          }; // Create a shortcut for the state
-          // Write it back to the store
-
-          this.store.state = next;
-          this.state = next;
+          };
+          this.store.state = state;
+          this.state = state;
         }
       });
       this.state = this.store.state;
@@ -467,51 +480,39 @@
 
   }
 
-  var id = 0;
-
-  function _classPrivateFieldLooseKey(name) {
-    return "__private_" + id++ + "_" + name;
-  }
-
-  function _classPrivateFieldLooseBase(receiver, privateKey) {
-    if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
-      throw new TypeError("attempted to use private field on non-instance");
-    }
-
-    return receiver;
-  }
-
   let uid = 0;
 
-  var _updateStore = /*#__PURE__*/_classPrivateFieldLooseKey("updateStore");
+  var _prevState = /*#__PURE__*/new WeakMap();
 
-  var _leaseValidateAsync = /*#__PURE__*/_classPrivateFieldLooseKey("leaseValidateAsync");
+  var _leaseValidateAsync = /*#__PURE__*/new WeakMap();
 
   class FieldApi {
     constructor(_opts) {
       var _this$getMeta;
 
-      this.options = {};
+      _defineProperty(this, "uid", void 0);
 
-      this.mount = () => {
-        const info = this.getInfo();
-        info.instances[this.uid] = this;
-        const unsubscribe = this.form.store.subscribe(() => {
-          _classPrivateFieldLooseBase(this, _updateStore)[_updateStore]();
-        });
-        return () => {
-          unsubscribe();
-          delete info.instances[this.uid];
+      _defineProperty(this, "form", void 0);
 
-          if (!Object.keys(info.instances).length) {
-            delete this.form.fieldInfo[this.name];
-          }
-        };
-      };
+      _defineProperty(this, "name", void 0);
+
+      _defineProperty(this, "store", void 0);
 
-      Object.defineProperty(this, _updateStore, {
+      _defineProperty(this, "state", void 0);
+
+      _classPrivateFieldInitSpec(this, _prevState, {
         writable: true,
-        value: () => {
+        value: void 0
+      });
+
+      _defineProperty(this, "options", {});
+
+      _defineProperty(this, "mount", () => {
+        var _this$options$onMount, _this$options;
+
+        const info = this.getInfo();
+        info.instances[this.uid] = this;
+        const unsubscribe = this.form.store.subscribe(() => {
           this.store.batch(() => {
             const nextValue = this.getValue();
             const nextMeta = this.getMeta();
@@ -528,17 +529,25 @@
               }));
             }
           });
-        }
+        });
+        (_this$options$onMount = (_this$options = this.options).onMount) == null ? void 0 : _this$options$onMount.call(_this$options, this);
+        return () => {
+          unsubscribe();
+          delete info.instances[this.uid];
+
+          if (!Object.keys(info.instances).length) {
+            delete this.form.fieldInfo[this.name];
+          }
+        };
       });
 
-      this.update = opts => {
-        var _this$form$options$de, _this$form$options$de2, _this$form$options$de3, _this$form$options$de4;
+      _defineProperty(this, "update", opts => {
+        var _this$form$options$as, _this$form$options$on, _this$form$options$on2;
 
         this.options = {
-          validatePristine: (_this$form$options$de = this.form.options.defaultValidatePristine) != null ? _this$form$options$de : false,
-          validateOn: (_this$form$options$de2 = this.form.options.defaultValidateOn) != null ? _this$form$options$de2 : 'change',
-          validateAsyncOn: (_this$form$options$de3 = this.form.options.defaultValidateAsyncOn) != null ? _this$form$options$de3 : 'blur',
-          validateAsyncDebounceMs: (_this$form$options$de4 = this.form.options.defaultValidateAsyncDebounceMs) != null ? _this$form$options$de4 : 0,
+          asyncDebounceMs: (_this$form$options$as = this.form.options.asyncDebounceMs) != null ? _this$form$options$as : 0,
+          onChangeAsyncDebounceMs: (_this$form$options$on = this.form.options.onChangeAsyncDebounceMs) != null ? _this$form$options$on : 0,
+          onBlurAsyncDebounceMs: (_this$form$options$on2 = this.form.options.onBlurAsyncDebounceMs) != null ? _this$form$options$on2 : 0,
           ...opts
         }; // Default Value
 
@@ -551,44 +560,42 @@
         if (this.getMeta() === undefined) {
           this.setMeta(this.state.meta);
         }
-      };
+      });
 
-      this.getValue = () => {
+      _defineProperty(this, "getValue", () => {
         return this.form.getFieldValue(this.name);
-      };
+      });
 
-      this.setValue = (updater, options) => this.form.setFieldValue(this.name, updater, options);
+      _defineProperty(this, "setValue", (updater, options) => this.form.setFieldValue(this.name, updater, options));
 
-      this.getMeta = () => this.form.getFieldMeta(this.name);
+      _defineProperty(this, "getMeta", () => this.form.getFieldMeta(this.name));
 
-      this.setMeta = updater => this.form.setFieldMeta(this.name, updater);
+      _defineProperty(this, "setMeta", updater => this.form.setFieldMeta(this.name, updater));
 
-      this.getInfo = () => this.form.getFieldInfo(this.name);
+      _defineProperty(this, "getInfo", () => this.form.getFieldInfo(this.name));
 
-      this.pushValue = value => this.form.pushFieldValue(this.name, value);
+      _defineProperty(this, "pushValue", value => this.form.pushFieldValue(this.name, value));
 
-      this.insertValue = (index, value) => this.form.insertFieldValue(this.name, index, value);
+      _defineProperty(this, "insertValue", (index, value) => this.form.insertFieldValue(this.name, index, value));
 
-      this.removeValue = index => this.form.removeFieldValue(this.name, index);
+      _defineProperty(this, "removeValue", index => this.form.removeFieldValue(this.name, index));
 
-      this.swapValues = (aIndex, bIndex) => this.form.swapFieldValues(this.name, aIndex, bIndex);
+      _defineProperty(this, "swapValues", (aIndex, bIndex) => this.form.swapFieldValues(this.name, aIndex, bIndex));
 
-      this.getSubField = name => new FieldApi({
+      _defineProperty(this, "getSubField", name => new FieldApi({
         name: this.name + "." + name,
         form: this.form
-      });
+      }));
 
-      this.validateSync = async (value = this.state.value) => {
+      _defineProperty(this, "validateSync", async (value = this.state.value, cause) => {
         const {
-          validate
+          onChange,
+          onBlur
         } = this.options;
-
-        if (!validate) {
-          return;
-        } // Use the validationCount for all field instances to
+        const validate = cause === 'submit' ? undefined : cause === 'change' ? onChange : onBlur;
+        if (!validate) return; // Use the validationCount for all field instances to
         // track freshness of the validation
 
-
         const validationCount = (this.getInfo().validationCount || 0) + 1;
         this.getInfo().validationCount = validationCount;
         const error = normalizeError(validate(value, this));
@@ -603,9 +610,9 @@
         if (this.state.meta.error) {
           this.cancelValidateAsync();
         }
-      };
+      });
 
-      Object.defineProperty(this, _leaseValidateAsync, {
+      _classPrivateFieldInitSpec(this, _leaseValidateAsync, {
         writable: true,
         value: () => {
           const count = (this.getInfo().validationAsyncCount || 0) + 1;
@@ -614,32 +621,36 @@
         }
       });
 
-      this.cancelValidateAsync = () => {
+      _defineProperty(this, "cancelValidateAsync", () => {
         // Lease a new validation count to ignore any pending validations
-        _classPrivateFieldLooseBase(this, _leaseValidateAsync)[_leaseValidateAsync](); // Cancel any pending validation state
+        _classPrivateFieldGet(this, _leaseValidateAsync).call(this); // Cancel any pending validation state
 
 
         this.setMeta(prev => ({ ...prev,
           isValidating: false
         }));
-      };
+      });
+
+      _defineProperty(this, "validateAsync", async (value = this.state.value, cause) => {
+        var _ref, _ref2;
 
-      this.validateAsync = async (value = this.state.value) => {
         const {
-          validateAsync,
-          validateAsyncDebounceMs
+          onChangeAsync,
+          onBlurAsync,
+          onSubmitAsync,
+          asyncDebounceMs,
+          onBlurAsyncDebounceMs,
+          onChangeAsyncDebounceMs
         } = this.options;
-
-        if (!validateAsync) {
-          return;
-        }
-
+        const validate = cause === 'change' ? onChangeAsync : cause === 'submit' ? onSubmitAsync : onBlurAsync;
+        if (!validate) return;
+        const debounceMs = cause === 'submit' ? 0 : (_ref = (_ref2 = cause === 'change' ? onChangeAsyncDebounceMs : onBlurAsyncDebounceMs) != null ? _ref2 : asyncDebounceMs) != null ? _ref : 500;
         if (this.state.meta.isValidating !== true) this.setMeta(prev => ({ ...prev,
           isValidating: true
         })); // Use the validationCount for all field instances to
         // track freshness of the validation
 
-        const validationAsyncCount = _classPrivateFieldLooseBase(this, _leaseValidateAsync)[_leaseValidateAsync]();
+        const validationAsyncCount = _classPrivateFieldGet(this, _leaseValidateAsync).call(this);
 
         const checkLatest = () => validationAsyncCount === this.getInfo().validationAsyncCount;
 
@@ -650,14 +661,14 @@
           });
         }
 
-        if (validateAsyncDebounceMs > 0) {
-          await new Promise(r => setTimeout(r, validateAsyncDebounceMs));
+        if (debounceMs > 0) {
+          await new Promise(r => setTimeout(r, debounceMs));
         } // Only kick off validation if this validation is the latest attempt
 
 
         if (checkLatest()) {
           try {
-            const rawError = await validateAsync(value, this);
+            const rawError = await validate(value, this);
 
             if (checkLatest()) {
               var _this$getInfo$validat, _this$getInfo;
@@ -688,43 +699,25 @@
 
 
         return this.getInfo().validationPromise;
-      };
-
-      this.shouldValidate = (isAsync, cause) => {
-        const {
-          validateOn,
-          validateAsyncOn
-        } = this.options;
-        const level = getValidationCauseLevel(cause); // Must meet *at least* the validation level to validate,
-        // e.g. if validateOn is 'change' and validateCause is 'blur',
-        // the field will still validate
-
-        return Object.keys(validateCauseLevels).some(d => isAsync ? validateAsyncOn : validateOn === d && level >= validateCauseLevels[d]);
-      };
+      });
 
-      this.validate = async (cause, value) => {
+      _defineProperty(this, "validate", (cause, value) => {
         // If the field is pristine and validatePristine is false, do not validate
-        if (!this.options.validatePristine && !this.state.meta.isTouched) return; // Attempt to sync validate first
-
-        if (this.shouldValidate(false, cause)) {
-          this.validateSync(value);
-        } // If there is an error, return it, do not attempt async validation
+        if (!this.state.meta.isTouched) return; // Attempt to sync validate first
 
+        this.validateSync(value, cause); // If there is an error, return it, do not attempt async validation
 
         if (this.state.meta.error) {
-          return this.state.meta.error;
+          if (!this.options.asyncAlways) {
+            return this.state.meta.error;
+          }
         } // No error? Attempt async validation
 
 
-        if (this.shouldValidate(true, cause)) {
-          return this.validateAsync(value);
-        } // If there is no sync error or async validation attempt, there is no error
-
-
-        return undefined;
-      };
+        return this.validateAsync(value, cause);
+      });
 
-      this.getChangeProps = (props = {}) => {
+      _defineProperty(this, "getChangeProps", (props = {}) => {
         return { ...props,
           value: this.state.value,
           onChange: value => {
@@ -732,16 +725,21 @@
             props.onChange == null ? void 0 : props.onChange(value);
           },
           onBlur: e => {
+            const prevTouched = this.state.meta.isTouched;
             this.setMeta(prev => ({ ...prev,
               isTouched: true
             }));
+
+            if (!prevTouched) {
+              this.validate('change');
+            }
+
             this.validate('blur');
-            props.onBlur == null ? void 0 : props.onBlur(e);
           }
         };
-      };
+      });
 
-      this.getInputProps = (props = {}) => {
+      _defineProperty(this, "getInputProps", (props = {}) => {
         return { ...props,
           value: String(this.state.value),
           onChange: e => {
@@ -750,7 +748,7 @@
           },
           onBlur: this.getChangeProps(props).onBlur
         };
-      };
+      });
 
       this.form = _opts.form;
       this.uid = uid++; // Support field prefixing from FieldScope
@@ -769,31 +767,27 @@
           ...this.options.defaultMeta
         }
       }, {
-        onUpdate: next => {
-          next.meta.touchedError = next.meta.isTouched ? next.meta.error : undefined; // Do not validate pristine fields
+        onUpdate: () => {
+          const state = this.store.state;
+          state.meta.touchedError = state.meta.isTouched ? state.meta.error : undefined;
 
-          const prevState = this.state;
-          this.state = next;
-
-          if (next.value !== prevState.value) {
-            this.validate('change', next.value);
+          if (state.value !== _classPrivateFieldGet(this, _prevState).value) {
+            this.validate('change', state.value);
           }
+
+          _classPrivateFieldSet(this, _prevState, state);
+
+          this.state = state;
         }
       });
       this.state = this.store.state;
+
+      _classPrivateFieldSet(this, _prevState, this.state);
+
       this.update(_opts);
     }
 
   }
-  const validateCauseLevels = {
-    change: 0,
-    blur: 1,
-    submit: 2
-  };
-
-  function getValidationCauseLevel(cause) {
-    return !cause ? 3 : validateCauseLevels[cause];
-  }
 
   function normalizeError(rawError) {
     if (rawError) {