@tanstack/form-core 0.0.9 → 0.0.12

package/build/lib/utils.legacy.js

@@ -0,0 +1,77 @@
+function functionalUpdate(updater, input) {
+  return typeof updater === 'function' ? updater(input) : updater;
+}
+
+/**
+ * Get a value from an object using a path, including dot notation.
+ */
+function getBy(obj, path) {
+  const pathArray = makePathArray(path);
+  const pathObj = pathArray;
+  return pathObj.reduce((current, pathPart) => {
+    if (typeof current !== 'undefined') {
+      return current[pathPart];
+    }
+    return undefined;
+  }, obj);
+}
+
+/**
+ * Set a value on an object using a path, including dot notation.
+ */
+function setBy(obj, _path, updater) {
+  const path = makePathArray(_path);
+  function doSet(parent) {
+    if (!path.length) {
+      return functionalUpdate(updater, parent);
+    }
+    const key = path.shift();
+    if (typeof key === 'string') {
+      if (typeof parent === 'object') {
+        return {
+          ...parent,
+          [key]: doSet(parent[key])
+        };
+      }
+      return {
+        [key]: doSet()
+      };
+    }
+    if (typeof key === 'number') {
+      if (Array.isArray(parent)) {
+        const prefix = parent.slice(0, key);
+        return [...(prefix.length ? prefix : new Array(key)), doSet(parent[key]), ...parent.slice(key + 1)];
+      }
+      return [...new Array(key), doSet()];
+    }
+    throw new Error('Uh oh!');
+  }
+  return doSet(obj);
+}
+const reFindNumbers0 = /^(\d*)$/gm;
+const reFindNumbers1 = /\.(\d*)\./gm;
+const reFindNumbers2 = /^(\d*)\./gm;
+const reFindNumbers3 = /\.(\d*$)/gm;
+const reFindMultiplePeriods = /\.{2,}/gm;
+const intPrefix = '__int__';
+const intReplace = intPrefix + "$1";
+function makePathArray(str) {
+  if (typeof str !== 'string') {
+    throw new Error('Path must be a string.');
+  }
+  return str.replace('[', '.').replace(']', '').replace(reFindNumbers0, intReplace).replace(reFindNumbers1, "." + intReplace + ".").replace(reFindNumbers2, intReplace + ".").replace(reFindNumbers3, "." + intReplace).replace(reFindMultiplePeriods, '.').split('.').map(d => {
+    if (d.indexOf(intPrefix) === 0) {
+      return parseInt(d.substring(intPrefix.length), 10);
+    }
+    return d;
+  });
+}
+
+// Is this type a tuple?
+
+// If this type is a tuple, what indices are allowed?
+
+// Hack to get TypeScript to show simplified types in error messages
+
+export { functionalUpdate, getBy, setBy };
+//# sourceMappingURL=utils.legacy.js.map

package/build/lib/utils.legacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.legacy.js","sources":["../../src/utils.ts"],"sourcesContent":["export type UpdaterFn<TInput, TOutput = TInput> = (input: TInput) => TOutput\n\nexport type Updater<TInput, TOutput = TInput> =\n  | TOutput\n  | UpdaterFn<TInput, TOutput>\n\nexport function functionalUpdate<TInput, TOutput = TInput>(\n  updater: Updater<TInput, TOutput>,\n  input: TInput,\n): TOutput {\n  return typeof updater === 'function'\n    ? (updater as UpdaterFn<TInput, TOutput>)(input)\n    : updater\n}\n\n/**\n * Get a value from an object using a path, including dot notation.\n */\nexport function getBy(obj: any, path: any) {\n  const pathArray = makePathArray(path)\n  const pathObj = pathArray\n  return pathObj.reduce((current: any, pathPart: any) => {\n    if (typeof current !== 'undefined') {\n      return current[pathPart]\n    }\n    return undefined\n  }, obj)\n}\n\n/**\n * Set a value on an object using a path, including dot notation.\n */\nexport function setBy(obj: any, _path: any, updater: Updater<any>) {\n  const path = makePathArray(_path)\n\n  function doSet(parent?: any): any {\n    if (!path.length) {\n      return functionalUpdate(updater, parent)\n    }\n\n    const key = path.shift()\n\n    if (typeof key === 'string') {\n      if (typeof parent === 'object') {\n        return {\n          ...parent,\n          [key]: doSet(parent[key]),\n        }\n      }\n      return {\n        [key]: doSet(),\n      }\n    }\n\n    if (typeof key === 'number') {\n      if (Array.isArray(parent)) {\n        const prefix = parent.slice(0, key)\n        return [\n          ...(prefix.length ? prefix : new Array(key)),\n          doSet(parent[key]),\n          ...parent.slice(key + 1),\n        ]\n      }\n      return [...new Array(key), doSet()]\n    }\n\n    throw new Error('Uh oh!')\n  }\n\n  return doSet(obj)\n}\n\nconst reFindNumbers0 = /^(\\d*)$/gm\nconst reFindNumbers1 = /\\.(\\d*)\\./gm\nconst reFindNumbers2 = /^(\\d*)\\./gm\nconst reFindNumbers3 = /\\.(\\d*$)/gm\nconst reFindMultiplePeriods = /\\.{2,}/gm\n\nconst intPrefix = '__int__'\nconst intReplace = `${intPrefix}$1`\n\nfunction makePathArray(str: string) {\n  if (typeof str !== 'string') {\n    throw new Error('Path must be a string.')\n  }\n\n  return str\n    .replace('[', '.')\n    .replace(']', '')\n    .replace(reFindNumbers0, intReplace)\n    .replace(reFindNumbers1, `.${intReplace}.`)\n    .replace(reFindNumbers2, `${intReplace}.`)\n    .replace(reFindNumbers3, `.${intReplace}`)\n    .replace(reFindMultiplePeriods, '.')\n    .split('.')\n    .map((d) => {\n      if (d.indexOf(intPrefix) === 0) {\n        return parseInt(d.substring(intPrefix.length), 10)\n      }\n      return d\n    })\n}\n\nexport type RequiredByKey<T, K extends keyof T> = Omit<T, K> &\n  Required<Pick<T, K>>\n\ntype ComputeRange<\n  N extends number,\n  Result extends Array<unknown> = [],\n> = Result['length'] extends N\n  ? Result\n  : ComputeRange<N, [...Result, Result['length']]>\ntype Index40 = ComputeRange<40>[number]\n\n// Is this type a tuple?\ntype IsTuple<T> = T extends readonly any[] & { length: infer Length }\n  ? Length extends Index40\n    ? T\n    : never\n  : never\n\n// If this type is a tuple, what indices are allowed?\ntype AllowedIndexes<\n  Tuple extends ReadonlyArray<any>,\n  Keys extends number = never,\n> = Tuple extends readonly []\n  ? Keys\n  : Tuple extends readonly [infer _, ...infer Tail]\n  ? AllowedIndexes<Tail, Keys | Tail['length']>\n  : Keys\n\nexport type DeepKeys<T> = unknown extends T\n  ? keyof T\n  : object extends T\n  ? string\n  : T extends readonly any[] & IsTuple<T>\n  ? AllowedIndexes<T> | DeepKeysPrefix<T, AllowedIndexes<T>>\n  : T extends any[]\n  ? DeepKeys<T[number]>\n  : T extends Date\n  ? never\n  : T extends object\n  ? (keyof T & string) | DeepKeysPrefix<T, keyof T>\n  : never\n\ntype DeepKeysPrefix<T, TPrefix> = TPrefix extends keyof T & (number | string)\n  ? `${TPrefix}.${DeepKeys<T[TPrefix]> & string}`\n  : never\n\nexport type DeepValue<T, TProp> = T extends Record<string | number, any>\n  ? TProp extends `${infer TBranch}.${infer TDeepProp}`\n    ? DeepValue<T[TBranch], TDeepProp>\n    : T[TProp & string]\n  : never\n\ntype Narrowable = string | number | bigint | boolean\n\ntype NarrowRaw<A> =\n  | (A extends [] ? [] : never)\n  | (A extends Narrowable ? A : never)\n  | {\n      [K in keyof A]: A[K] extends Function ? A[K] : NarrowRaw<A[K]>\n    }\n\nexport type Narrow<A> = Try<A, [], NarrowRaw<A>>\n\ntype Try<A1, A2, Catch = never> = A1 extends A2 ? A1 : Catch\n\n// Hack to get TypeScript to show simplified types in error messages\nexport type Pretty<T> = { [K in keyof T]: T[K] } & {}\n"],"names":["functionalUpdate","updater","input","getBy","obj","path","pathArray","makePathArray","pathObj","reduce","current","pathPart","undefined","setBy","_path","doSet","parent","length","key","shift","Array","isArray","prefix","slice","Error","reFindNumbers0","reFindNumbers1","reFindNumbers2","reFindNumbers3","reFindMultiplePeriods","intPrefix","intReplace","str","replace","split","map","d","indexOf","parseInt","substring"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/form-core",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "description": "Powerful, type-safe, framework agnostic forms.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -10,23 +10,36 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
-  "types": "build/types/index.d.ts",
-  "main": "build/cjs/index.js",
-  "module": "build/esm/index.js",
+  "type": "module",
+  "types": "build/lib/index.d.ts",
+  "main": "build/lib/index.legacy.cjs",
+  "module": "build/lib/index.legacy.js",
+  "exports": {
+    ".": {
+      "types": "./build/lib/index.d.ts",
+      "import": "./build/lib/index.js",
+      "require": "./build/lib/index.cjs",
+      "default": "./build/lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "files": [
-    "build/**",
+    "build/lib/*",
     "src"
   ],
   "dependencies": {
-    "@tanstack/store": "0.0.1-beta.84"
+    "@tanstack/store": "0.0.1-beta.89"
   },
   "scripts": {
-    "clean": "rimraf ./build",
+    "clean": "rimraf ./build && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types": "tsc",
-    "test:lib": "jest --config ./jest.config.ts",
+    "test:types": "tsc --noEmit && vitest typecheck",
+    "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
-    "build:types": "tsc --build"
+    "test:build": "publint --strict",
+    "build": "pnpm build:rollup && pnpm build:types",
+    "build:rollup": "rollup --config rollup.config.js",
+    "build:types": "tsc --emitDeclarationOnly"
   }
 }

package/src/FieldApi.ts

@@ -1,26 +1,45 @@
-//
-import type { DeepKeys, DeepValue, RequiredByKey, Updater } from './utils'
+import type { DeepKeys, DeepValue, Updater } from './utils'
 import type { FormApi, ValidationError } from './FormApi'
 import { Store } from '@tanstack/store'
 
 export type ValidationCause = 'change' | 'blur' | 'submit'
 
-export interface FieldOptions<TData, TFormData> {
-  name: unknown extends TFormData ? string : DeepKeys<TFormData>
+type ValidateFn<TData, TFormData> = (
+  value: TData,
+  fieldApi: FieldApi<TData, TFormData>,
+) => ValidationError
+
+type ValidateAsyncFn<TData, TFormData> = (
+  value: TData,
+  fieldApi: FieldApi<TData, TFormData>,
+) => ValidationError | Promise<ValidationError>
+
+export interface FieldOptions<
+  _TData,
+  TFormData,
+  /**
+   * This allows us to restrict the name to only be a valid field name while
+   * also assigning it to a generic
+   */
+  TName = unknown extends TFormData ? string : DeepKeys<TFormData>,
+  /**
+   * If TData is unknown, we can use the TName generic to determine the type
+   */
+  TData = unknown extends _TData ? DeepValue<TFormData, TName> : _TData,
+> {
+  name: TName
   index?: TData extends any[] ? number : never
   defaultValue?: TData
-  validate?: (
-    value: TData,
-    fieldApi: FieldApi<TData, TFormData>,
-  ) => ValidationError
-  validateAsync?: (
-    value: TData,
-    fieldApi: FieldApi<TData, TFormData>,
-  ) => ValidationError | Promise<ValidationError>
-  validatePristine?: boolean // Default: false
-  validateOn?: ValidationCause // Default: 'change'
-  validateAsyncOn?: ValidationCause // Default: 'blur'
-  validateAsyncDebounceMs?: number
+  asyncDebounceMs?: number
+  asyncAlways?: boolean
+  onMount?: (formApi: FieldApi<TData, TFormData>) => void
+  onChange?: ValidateFn<TData, TFormData>
+  onChangeAsync?: ValidateAsyncFn<TData, TFormData>
+  onChangeAsyncDebounceMs?: number
+  onBlur?: ValidateFn<TData, TFormData>
+  onBlurAsync?: ValidateAsyncFn<TData, TFormData>
+  onBlurAsyncDebounceMs?: number
+  onSubmitAsync?: ValidateAsyncFn<TData, TFormData>
   defaultMeta?: Partial<FieldMeta>
 }
 
@@ -50,12 +69,12 @@ export type UserInputProps = {
 
 export type ChangeProps<TData> = {
   value: TData
-  onChange: (updater: Updater<TData>) => void
+  onChange: (value: TData) => void
   onBlur: (event: any) => void
 }
 
-export type InputProps = {
-  value: string
+export type InputProps<T> = {
+  value: T
   onChange: (event: any) => void
   onBlur: (event: any) => void
 }
@@ -67,19 +86,33 @@ export type FieldState<TData> = {
   meta: FieldMeta
 }
 
+/**
+ * TData may not be known at the time of FieldApi construction, so we need to
+ * use a conditional type to determine if TData is known or not.
+ *
+ * If TData is not known, we use the TFormData type to determine the type of
+ * the field value based on the field name.
+ */
+type GetTData<Name, TData, TFormData> = unknown extends TData
+  ? DeepValue<TFormData, Name>
+  : TData
+
 export class FieldApi<TData, TFormData> {
   uid: number
   form: FormApi<TFormData>
   name!: DeepKeys<TFormData>
-  store!: Store<FieldState<TData>>
-  state!: FieldState<TData>
-  options: RequiredByKey<
-    FieldOptions<TData, TFormData>,
-    | 'validatePristine'
-    | 'validateOn'
-    | 'validateAsyncOn'
-    | 'validateAsyncDebounceMs'
-  > = {} as any
+  /**
+   * This is a hack that allows us to use `GetTData` without calling it everywhere
+   *
+   * Unfortunately this hack appears to be needed alongside the `TName` hack
+   * further up in this file. This properly types all of the internal methods,
+   * while the `TName` hack types the options properly
+   */
+  _tdata!: GetTData<typeof this.name, TData, TFormData>
+  store!: Store<FieldState<typeof this._tdata>>
+  state!: FieldState<typeof this._tdata>
+  prevState!: FieldState<typeof this._tdata>
+  options: FieldOptions<typeof this._tdata, TFormData> = {} as any
 
   constructor(opts: FieldApiOptions<TData, TFormData>) {
     this.form = opts.form
@@ -92,7 +125,7 @@ export class FieldApi<TData, TFormData> {
 
     this.name = opts.name as any
 
-    this.store = new Store<FieldState<TData>>(
+    this.store = new Store<FieldState<typeof this._tdata>>(
       {
         value: this.getValue(),
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -103,23 +136,22 @@ export class FieldApi<TData, TFormData> {
         },
       },
       {
-        onUpdate: (next) => {
-          next.meta.touchedError = next.meta.isTouched
-            ? next.meta.error
+        onUpdate: () => {
+          const state = this.store.state
+
+          state.meta.touchedError = state.meta.isTouched
+            ? state.meta.error
             : undefined
 
-          // Do not validate pristine fields
-          const prevState = this.state
-          this.state = next
-          if (next.value !== prevState.value) {
-            this.validate('change', next.value)
-          }
+          this.prevState = state
+          this.state = state
         },
       },
     )
 
     this.state = this.store.state
-    this.update(opts)
+    this.prevState = this.state
+    this.update(opts as never)
   }
 
   mount = () => {
@@ -127,9 +159,22 @@ export class FieldApi<TData, TFormData> {
     info.instances[this.uid] = this
 
     const unsubscribe = this.form.store.subscribe(() => {
-      this.#updateStore()
+      this.store.batch(() => {
+        const nextValue = this.getValue()
+        const nextMeta = this.getMeta()
+
+        if (nextValue !== this.state.value) {
+          this.store.setState((prev) => ({ ...prev, value: nextValue }))
+        }
+
+        if (nextMeta !== this.state.meta) {
+          this.store.setState((prev) => ({ ...prev, meta: nextMeta }))
+        }
+      })
     })
 
+    this.options.onMount?.(this as never)
+
     return () => {
       unsubscribe()
       delete info.instances[this.uid]
@@ -139,37 +184,30 @@ export class FieldApi<TData, TFormData> {
     }
   }
 
-  #updateStore = () => {
-    this.store.batch(() => {
-      const nextValue = this.getValue()
-      const nextMeta = this.getMeta()
-
-      if (nextValue !== this.state.value) {
-        this.store.setState((prev) => ({ ...prev, value: nextValue }))
-      }
-
-      if (nextMeta !== this.state.meta) {
-        this.store.setState((prev) => ({ ...prev, meta: nextMeta }))
-      }
-    })
-  }
-
-  update = (opts: FieldApiOptions<TData, TFormData>) => {
+  update = (opts: FieldApiOptions<typeof this._tdata, TFormData>) => {
     this.options = {
-      validatePristine: this.form.options.defaultValidatePristine ?? false,
-      validateOn: this.form.options.defaultValidateOn ?? 'change',
-      validateAsyncOn: this.form.options.defaultValidateAsyncOn ?? 'blur',
-      validateAsyncDebounceMs:
-        this.form.options.defaultValidateAsyncDebounceMs ?? 0,
+      asyncDebounceMs: this.form.options.asyncDebounceMs ?? 0,
+      onChangeAsyncDebounceMs: this.form.options.onChangeAsyncDebounceMs ?? 0,
+      onBlurAsyncDebounceMs: this.form.options.onBlurAsyncDebounceMs ?? 0,
       ...opts,
-    }
+    } as never
 
     // Default Value
-    if (
-      this.state.value === undefined &&
-      this.options.defaultValue !== undefined
-    ) {
-      this.setValue(this.options.defaultValue)
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (this.state.value === undefined) {
+      if (this.options.defaultValue !== undefined) {
+        this.setValue(this.options.defaultValue as never)
+      } else if (
+        opts.form.options.defaultValues?.[
+          this.options.name as keyof TFormData
+        ] !== undefined
+      ) {
+        this.setValue(
+          opts.form.options.defaultValues[
+            this.options.name as keyof TFormData
+          ] as never,
+        )
+      }
     }
 
     // Default Meta
@@ -179,46 +217,61 @@ export class FieldApi<TData, TFormData> {
     }
   }
 
-  getValue = (): TData => {
+  getValue = (): typeof this._tdata => {
     return this.form.getFieldValue(this.name)
   }
+
   setValue = (
-    updater: Updater<TData>,
+    updater: Updater<typeof this._tdata>,
     options?: { touch?: boolean; notify?: boolean },
-  ) => this.form.setFieldValue(this.name, updater as any, options)
+  ) => {
+    this.form.setFieldValue(this.name, updater as never, options)
+    this.validate('change', this.state.value)
+  }
 
   getMeta = (): FieldMeta => this.form.getFieldMeta(this.name)
+
   setMeta = (updater: Updater<FieldMeta>) =>
     this.form.setFieldMeta(this.name, updater)
 
   getInfo = () => this.form.getFieldInfo(this.name)
 
-  pushValue = (value: TData extends any[] ? TData[number] : never) =>
-    this.form.pushFieldValue(this.name, value as any)
-  insertValue = (index: number, value: TData) =>
-    this.form.insertFieldValue(this.name, index, value as any)
+  pushValue = (
+    value: typeof this._tdata extends any[]
+      ? (typeof this._tdata)[number]
+      : never,
+  ) => this.form.pushFieldValue(this.name, value as any)
+
+  insertValue = (
+    index: number,
+    value: typeof this._tdata extends any[]
+      ? (typeof this._tdata)[number]
+      : never,
+  ) => this.form.insertFieldValue(this.name, index, value as any)
+
   removeValue = (index: number) => this.form.removeFieldValue(this.name, index)
+
   swapValues = (aIndex: number, bIndex: number) =>
     this.form.swapFieldValues(this.name, aIndex, bIndex)
 
-  getSubField = <TName extends DeepKeys<TData>>(name: TName) =>
-    new FieldApi<DeepValue<TData, TName>, TFormData>({
-      name: `${this.name}.${name}` as any,
+  getSubField = <TName extends DeepKeys<typeof this._tdata>>(name: TName) =>
+    new FieldApi<DeepValue<typeof this._tdata, TName>, TFormData>({
+      name: `${this.name}.${name}` as never,
       form: this.form,
     })
 
-  validateSync = async (value = this.state.value) => {
-    const { validate } = this.options
+  validateSync = (value = this.state.value, cause: ValidationCause) => {
+    const { onChange, onBlur } = this.options
+    const validate =
+      cause === 'submit' ? undefined : cause === 'change' ? onChange : onBlur
 
-    if (!validate) {
-      return
-    }
+    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))
+    const error = normalizeError(validate(value as never, this as never))
 
     if (this.state.meta.error !== error) {
       this.setMeta((prev) => ({
@@ -249,12 +302,33 @@ export class FieldApi<TData, TFormData> {
     }))
   }
 
-  validateAsync = async (value = this.state.value) => {
-    const { validateAsync, validateAsyncDebounceMs } = this.options
-
-    if (!validateAsync) {
-      return
-    }
+  validateAsync = async (value = this.state.value, cause: ValidationCause) => {
+    const {
+      onChangeAsync,
+      onBlurAsync,
+      onSubmitAsync,
+      asyncDebounceMs,
+      onBlurAsyncDebounceMs,
+      onChangeAsyncDebounceMs,
+    } = this.options
+
+    const validate =
+      cause === 'change'
+        ? onChangeAsync
+        : cause === 'submit'
+        ? onSubmitAsync
+        : onBlurAsync
+
+    if (!validate) return
+
+    const debounceMs =
+      cause === 'submit'
+        ? 0
+        : (cause === 'change'
+            ? onChangeAsyncDebounceMs
+            : onBlurAsyncDebounceMs) ??
+          asyncDebounceMs ??
+          500
 
     if (this.state.meta.isValidating !== true)
       this.setMeta((prev) => ({ ...prev, isValidating: true }))
@@ -273,14 +347,14 @@ export class FieldApi<TData, TFormData> {
       })
     }
 
-    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 as never, this as never)
 
         if (checkLatest()) {
           const error = normalizeError(rawError)
@@ -308,89 +382,67 @@ export class FieldApi<TData, TFormData> {
     return this.getInfo().validationPromise
   }
 
-  shouldValidate = (isAsync: boolean, cause?: ValidationCause) => {
-    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],
-    )
-  }
-
-  validate = async (
-    cause?: ValidationCause,
-    value?: TData,
-  ): Promise<ValidationError> => {
+  validate = (
+    cause: ValidationCause,
+    value?: typeof this._tdata,
+  ): ValidationError | Promise<ValidationError> => {
     // If the field is pristine and validatePristine is false, do not validate
-    if (!this.options.validatePristine && !this.state.meta.isTouched) return
+    if (!this.state.meta.isTouched) return
 
     // Attempt to sync validate first
-    if (this.shouldValidate(false, cause)) {
-      this.validateSync(value)
-    }
+    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)
   }
 
   getChangeProps = <T extends UserChangeProps<any>>(
     props: T = {} as T,
-  ): ChangeProps<TData> & Omit<T, keyof ChangeProps<TData>> => {
+  ): ChangeProps<typeof this._tdata> &
+    Omit<T, keyof ChangeProps<typeof this._tdata>> => {
     return {
       ...props,
       value: this.state.value,
       onChange: (value) => {
-        this.setValue(value)
+        this.setValue(value as never)
         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?.(e)
       },
-    } as ChangeProps<TData> & Omit<T, keyof ChangeProps<TData>>
+    } as ChangeProps<typeof this._tdata> &
+      Omit<T, keyof ChangeProps<typeof this._tdata>>
   }
 
   getInputProps = <T extends UserInputProps>(
     props: T = {} as T,
-  ): InputProps & Omit<T, keyof InputProps> => {
+  ): InputProps<typeof this._tdata> &
+    Omit<T, keyof InputProps<typeof this._tdata>> => {
     return {
       ...props,
-      value: String(this.state.value),
+      value: this.state.value,
       onChange: (e) => {
         this.setValue(e.target.value)
         props.onChange?.(e.target.value)
       },
       onBlur: this.getChangeProps(props).onBlur,
-    }
+    } as InputProps<typeof this._tdata> &
+      Omit<T, keyof InputProps<typeof this._tdata>>
   }
 }
 
-const validateCauseLevels = {
-  change: 0,
-  blur: 1,
-  submit: 2,
-}
-
-function getValidationCauseLevel(cause?: ValidationCause) {
-  return !cause ? 3 : validateCauseLevels[cause]
-}
-
 function normalizeError(rawError?: ValidationError) {
   if (rawError) {
     if (typeof rawError !== 'string') {