remix-validated-form 4.2.0 → 4.3.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 $ npm run build:browser && npm run build:main
 
-> remix-validated-form@4.1.9 build:browser
+> remix-validated-form@4.2.0 build:browser
 > tsc --module ESNext --outDir ./browser
 
 
-> remix-validated-form@4.1.9 build:main
+> remix-validated-form@4.2.0 build:main
 > tsc --module CommonJS --outDir ./build
 

package/browser/ValidatedForm.js

@@ -8,7 +8,9 @@ import { FORM_ID_FIELD } from "./internal/constants";
 import { InternalFormContext, } from "./internal/formContext";
 import { useDefaultValuesFromLoader, useErrorResponseForForm, useFormUpdateAtom, useHasActiveFormSubmit, } from "./internal/hooks";
 import { useMultiValueMap } from "./internal/MultiValueMap";
-import { cleanupFormState, endSubmitAtom, fieldErrorsAtom, formElementAtom, formPropsAtom, isHydratedAtom, resetAtom, setFieldErrorAtom, startSubmitAtom, } from "./internal/state";
+import { resetAtom } from "./internal/reset";
+import { cleanupFormState, endSubmitAtom, fieldErrorsAtom, formElementAtom, formPropsAtom, isHydratedAtom, setFieldErrorAtom, startSubmitAtom, } from "./internal/state";
+import { useAwaitValue } from "./internal/state/controlledFields";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import { mergeRefs, useDeepEqualsMemo, useIsomorphicLayoutEffect as useLayoutEffect, } from "./internal/util";
 const getDataFromForm = (el) => new FormData(el);
@@ -123,8 +125,10 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         setHydrated(true);
         return () => cleanupFormState(formId);
     }, [formId, setHydrated]);
+    const awaitValue = useAwaitValue(formId);
     const validateField = useCallback(async (field) => {
         invariant(formRef.current, "Cannot find reference to form");
+        await awaitValue(field);
         const { error } = await validator.validateField(getDataFromForm(formRef.current), field);
         if (error) {
             setFieldError({ field, error });
@@ -134,7 +138,7 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
             setFieldError({ field, error: undefined });
             return null;
         }
-    }, [setFieldError, validator]);
+    }, [awaitValue, setFieldError, validator]);
     const customFocusHandlers = useMultiValueMap();
     const registerReceiveFocus = useCallback((fieldName, handler) => {
         customFocusHandlers().add(fieldName, handler);

package/browser/hooks.d.ts

@@ -63,3 +63,5 @@ export declare const useField: (name: string, options?: {
      */
     formId?: string | undefined;
 } | undefined) => FieldProps;
+export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
+export declare const useUpdateControlledField: (formId?: string | undefined) => (field: string, value: unknown) => void;

package/browser/hooks.js

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from "react";
 import { createGetInputProps, } from "./internal/getInputProps";
 import { useInternalFormContext, useFieldTouched, useFieldError, useFormAtomValue, useFieldDefaultValue, } from "./internal/hooks";
 import { formPropsAtom, hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, } from "./internal/state";
+import { useControllableValue, useUpdateControllableValue, } from "./internal/state/controlledFields";
 /**
  * Returns whether or not the parent form is currently being submitted.
  * This is different from remix's `useTransition().submission` in that it
@@ -71,3 +72,12 @@ export const useField = (name, options) => {
     ]);
     return field;
 };
+export const useControlField = (name, formId) => {
+    const context = useInternalFormContext(formId, "useControlField");
+    const [value, setValue] = useControllableValue(context, name);
+    return [value, setValue];
+};
+export const useUpdateControlledField = (formId) => {
+    const context = useInternalFormContext(formId, "useControlField");
+    return useUpdateControllableValue(context.formId);
+};

package/browser/internal/MultiValueMap.d.ts

@@ -1,9 +1,11 @@
 export declare class MultiValueMap<Key, Value> {
     private dict;
     add: (key: Key, value: Value) => void;
+    delete: (key: Key) => void;
     remove: (key: Key, value: Value) => void;
     getAll: (key: Key) => Value[];
     entries: () => IterableIterator<[Key, Value[]]>;
+    values: () => IterableIterator<Value[]>;
     has: (key: Key) => boolean;
 }
 export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/browser/internal/MultiValueMap.js

@@ -10,6 +10,9 @@ export class MultiValueMap {
                 this.dict.set(key, [value]);
             }
         };
+        this.delete = (key) => {
+            this.dict.delete(key);
+        };
         this.remove = (key, value) => {
             if (!this.dict.has(key))
                 return;
@@ -25,6 +28,7 @@ export class MultiValueMap {
             return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
         };
         this.entries = () => this.dict.entries();
+        this.values = () => this.dict.values();
         this.has = (key) => this.dict.has(key);
     }
 }

package/browser/internal/getInputProps.js

@@ -42,7 +42,8 @@ export const createGetInputProps = ({ clearError, validate, defaultValue, touche
         else if (props.type === "radio") {
             inputProps.defaultChecked = getRadioChecked(props.value, defaultValue);
         }
-        else {
+        else if (props.value === undefined) {
+            // We should only set the defaultValue if the input is uncontrolled.
             inputProps.defaultValue = defaultValue;
         }
         return omitBy(inputProps, (value) => value === undefined);

package/browser/internal/reset.d.ts

@@ -0,0 +1,28 @@
+import { InternalFormId } from "./state/atomUtils";
+export declare const resetAtom: {
+    (param: InternalFormId): import("jotai").Atom<null> & {
+        write: (get: {
+            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: unknown) => void;
+        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: null;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};

package/browser/internal/reset.js

@@ -0,0 +1,13 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import lodashGet from "lodash/get";
+import { fieldErrorsAtom, formPropsAtom, hasBeenSubmittedAtom, touchedFieldsAtom, } from "./state";
+import { controlledFieldsAtom } from "./state/controlledFields";
+export const resetAtom = atomFamily((formId) => atom(null, (get, set) => {
+    set(fieldErrorsAtom(formId), {});
+    set(touchedFieldsAtom(formId), {});
+    set(hasBeenSubmittedAtom(formId), false);
+    const { defaultValues } = get(formPropsAtom(formId));
+    const controlledFields = get(controlledFieldsAtom(formId));
+    Object.entries(controlledFields).forEach(([name, atom]) => set(atom, lodashGet(defaultValues, name)));
+}));

package/browser/internal/state/controlledFields.d.ts

@@ -1,5 +1,6 @@
 import { PrimitiveAtom } from "jotai";
-import { InternalFormId } from "./atomUtils";
+import { InternalFormContextValue } from "../formContext";
+import { FieldAtomKey, InternalFormId } from "./atomUtils";
 export declare const controlledFieldsAtom: {
     (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
         write: (get: {
@@ -27,6 +28,60 @@ export declare const controlledFieldsAtom: {
     remove(param: InternalFormId): void;
     setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
 };
+export declare const valueUpdatePromiseAtom: {
+    (param: FieldAtomKey): import("jotai").Atom<Promise<void> | undefined> & {
+        write: (get: {
+            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: Promise<void> | ((prev: Promise<void> | undefined) => Promise<void> | undefined) | undefined) => void;
+        onMount?: (<S extends (update?: Promise<void> | ((prev: Promise<void> | undefined) => Promise<void> | undefined) | undefined) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: Promise<void> | undefined;
+    };
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};
+export declare const resolveValueUpdateAtom: {
+    (param: FieldAtomKey): import("jotai").Atom<(() => void) | undefined> & {
+        write: (get: {
+            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: (() => void) | ((prev: (() => void) | undefined) => (() => void) | undefined) | undefined) => void;
+        onMount?: (<S extends (update?: (() => void) | ((prev: (() => void) | undefined) => (() => void) | undefined) | undefined) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: (() => void) | undefined;
+    };
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};
 export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
     write: (get: {
         <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
@@ -49,14 +104,16 @@ export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
         formId: InternalFormId;
         field: string;
         value: unknown;
-    }) => Promise<void>;
+    }) => void;
     onMount?: (<S extends (update: {
         formId: InternalFormId;
         field: string;
         value: unknown;
-    }) => Promise<void>>(setAtom: S) => void | (() => void)) | undefined;
+    }) => void>(setAtom: S) => void | (() => void)) | undefined;
 } & {
     init: null;
 };
-export declare const useControlledFieldValue: (formId: InternalFormId, field: string) => any;
-export declare const useControllableValue: (formId: InternalFormId, field: string) => readonly [any, (value: unknown) => Promise<void>];
+export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
+export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
+export declare const useUpdateControllableValue: (formId: InternalFormId) => (field: string, value: unknown) => void;
+export declare const useAwaitValue: (formId: InternalFormId) => (arg: string) => Promise<void>;

package/browser/internal/state/controlledFields.js

@@ -1,4 +1,5 @@
 import { atom } from "jotai";
+import { useAtomCallback } from "jotai/utils";
 import omit from "lodash/omit";
 import { useCallback, useEffect } from "react";
 import { useFieldDefaultValue, useFormAtomValue, useFormAtom, useFormUpdateAtom, } from "../hooks";
@@ -8,7 +9,8 @@ export const controlledFieldsAtom = formAtomFamily({});
 const refCountAtom = fieldAtomFamily(() => atom(0));
 const fieldValueAtom = fieldAtomFamily(() => atom(undefined));
 const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
-const pendingValidateAtom = fieldAtomFamily(() => atom(undefined));
+export const valueUpdatePromiseAtom = fieldAtomFamily(() => atom(undefined));
+export const resolveValueUpdateAtom = fieldAtomFamily(() => atom(undefined));
 const registerAtom = atom(null, (get, set, { formId, field }) => {
     set(refCountAtom({ formId, field }), (prev) => prev + 1);
     const newRefCount = get(refCountAtom({ formId, field }));
@@ -27,22 +29,27 @@ const unregisterAtom = atom(null, (get, set, { formId, field }) => {
     if (newRefCount === 0) {
         set(controlledFieldsAtom(formId), (prev) => omit(prev, field));
         fieldValueAtom.remove({ formId, field });
-        pendingValidateAtom.remove({ formId, field });
+        resolveValueUpdateAtom.remove({ formId, field });
         fieldValueHydratedAtom.remove({ formId, field });
     }
 });
-export const setControlledFieldValueAtom = atom(null, async (_get, set, { formId, field, value, }) => {
+export const setControlledFieldValueAtom = atom(null, (_get, set, { formId, field, value, }) => {
     set(fieldValueAtom({ formId, field }), value);
-    const pending = pendingValidateAtom({ formId, field });
-    await new Promise((resolve) => set(pending, resolve));
-    set(pending, undefined);
+    const resolveAtom = resolveValueUpdateAtom({ formId, field });
+    const promiseAtom = valueUpdatePromiseAtom({ formId, field });
+    const promise = new Promise((resolve) => set(resolveAtom, () => {
+        resolve();
+        set(resolveAtom, undefined);
+        set(promiseAtom, undefined);
+    }));
+    set(promiseAtom, promise);
 });
-export const useControlledFieldValue = (formId, field) => {
-    const fieldAtom = fieldValueAtom({ formId, field });
+export const useControlledFieldValue = (context, field) => {
+    const fieldAtom = fieldValueAtom({ formId: context.formId, field });
     const [value, setValue] = useFormAtom(fieldAtom);
-    const defaultValue = useFieldDefaultValue(field, { formId });
-    const isHydrated = useFormAtomValue(isHydratedAtom(formId));
-    const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(fieldValueHydratedAtom({ formId, field }));
+    const defaultValue = useFieldDefaultValue(field, context);
+    const isHydrated = useFormAtomValue(isHydratedAtom(context.formId));
+    const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(fieldValueHydratedAtom({ formId: context.formId, field }));
     useEffect(() => {
         if (isHydrated && !isFieldHydrated) {
             setValue(defaultValue);
@@ -51,7 +58,7 @@ export const useControlledFieldValue = (formId, field) => {
     }, [
         defaultValue,
         field,
-        formId,
+        context.formId,
         isFieldHydrated,
         isHydrated,
         setIsFieldHydrated,
@@ -59,19 +66,28 @@ export const useControlledFieldValue = (formId, field) => {
     ]);
     return isFieldHydrated ? value : defaultValue;
 };
-export const useControllableValue = (formId, field) => {
-    const pending = useFormAtomValue(pendingValidateAtom({ formId, field }));
+export const useControllableValue = (context, field) => {
+    const resolveUpdate = useFormAtomValue(resolveValueUpdateAtom({ formId: context.formId, field }));
     useEffect(() => {
-        pending === null || pending === void 0 ? void 0 : pending();
-    }, [pending]);
+        resolveUpdate === null || resolveUpdate === void 0 ? void 0 : resolveUpdate();
+    }, [resolveUpdate]);
     const register = useFormUpdateAtom(registerAtom);
     const unregister = useFormUpdateAtom(unregisterAtom);
     useEffect(() => {
-        register({ formId, field });
-        return () => unregister({ formId, field });
-    }, [field, formId, register, unregister]);
+        register({ formId: context.formId, field });
+        return () => unregister({ formId: context.formId, field });
+    }, [context.formId, field, register, unregister]);
     const setControlledFieldValue = useFormUpdateAtom(setControlledFieldValueAtom);
-    const setValue = useCallback((value) => setControlledFieldValue({ formId, field, value }), [field, formId, setControlledFieldValue]);
-    const value = useControlledFieldValue(formId, field);
+    const setValue = useCallback((value) => setControlledFieldValue({ formId: context.formId, field, value }), [field, context.formId, setControlledFieldValue]);
+    const value = useControlledFieldValue(context, field);
     return [value, setValue];
 };
+export const useUpdateControllableValue = (formId) => {
+    const setControlledFieldValue = useFormUpdateAtom(setControlledFieldValueAtom);
+    return useCallback((field, value) => setControlledFieldValue({ formId, field, value }), [formId, setControlledFieldValue]);
+};
+export const useAwaitValue = (formId) => {
+    return useAtomCallback(useCallback(async (get, _set, field) => {
+        await get(valueUpdatePromiseAtom({ formId, field }));
+    }, [formId]));
+};

package/browser/internal/state.d.ts

@@ -206,33 +206,6 @@ export declare const isValidAtom: {
     remove(param: InternalFormId): void;
     setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
 };
-export declare const resetAtom: {
-    (param: InternalFormId): import("jotai").Atom<null> & {
-        write: (get: {
-            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: unknown) => void;
-        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: null;
-    };
-    remove(param: InternalFormId): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-};
 export declare const startSubmitAtom: {
     (param: InternalFormId): import("jotai").Atom<null> & {
         write: (get: {

package/browser/internal/state.js

@@ -26,11 +26,6 @@ export const cleanupFormState = (formId) => {
     ].forEach((formAtom) => formAtom.remove(formId));
 };
 export const isValidAtom = atomFamily((formId) => atom((get) => Object.keys(get(fieldErrorsAtom(formId))).length === 0));
-export const resetAtom = atomFamily((formId) => atom(null, (_get, set) => {
-    set(fieldErrorsAtom(formId), {});
-    set(touchedFieldsAtom(formId), {});
-    set(hasBeenSubmittedAtom(formId), false);
-}));
 export const startSubmitAtom = atomFamily((formId) => atom(null, (_get, set) => {
     set(isSubmittingAtom(formId), true);
     set(hasBeenSubmittedAtom(formId), true);

package/build/ValidatedForm.js

@@ -33,7 +33,9 @@ const constants_1 = require("./internal/constants");
 const formContext_1 = require("./internal/formContext");
 const hooks_2 = require("./internal/hooks");
 const MultiValueMap_1 = require("./internal/MultiValueMap");
+const reset_1 = require("./internal/reset");
 const state_1 = require("./internal/state");
+const controlledFields_1 = require("./internal/state/controlledFields");
 const submissionCallbacks_1 = require("./internal/submissionCallbacks");
 const util_1 = require("./internal/util");
 const getDataFromForm = (el) => new FormData(el);
@@ -138,7 +140,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
     const submit = (0, react_1.useSubmit)();
     const setFieldErrors = (0, hooks_2.useFormUpdateAtom)((0, state_1.fieldErrorsAtom)(formId));
     const setFieldError = (0, hooks_2.useFormUpdateAtom)((0, state_1.setFieldErrorAtom)(formId));
-    const reset = (0, hooks_2.useFormUpdateAtom)((0, state_1.resetAtom)(formId));
+    const reset = (0, hooks_2.useFormUpdateAtom)((0, reset_1.resetAtom)(formId));
     const startSubmit = (0, hooks_2.useFormUpdateAtom)((0, state_1.startSubmitAtom)(formId));
     const endSubmit = (0, hooks_2.useFormUpdateAtom)((0, state_1.endSubmitAtom)(formId));
     const syncFormProps = (0, hooks_2.useFormUpdateAtom)((0, state_1.formPropsAtom)(formId));
@@ -148,8 +150,10 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         setHydrated(true);
         return () => (0, state_1.cleanupFormState)(formId);
     }, [formId, setHydrated]);
+    const awaitValue = (0, controlledFields_1.useAwaitValue)(formId);
     const validateField = (0, react_2.useCallback)(async (field) => {
         (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
+        await awaitValue(field);
         const { error } = await validator.validateField(getDataFromForm(formRef.current), field);
         if (error) {
             setFieldError({ field, error });
@@ -159,7 +163,7 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
             setFieldError({ field, error: undefined });
             return null;
         }
-    }, [setFieldError, validator]);
+    }, [awaitValue, setFieldError, validator]);
     const customFocusHandlers = (0, MultiValueMap_1.useMultiValueMap)();
     const registerReceiveFocus = (0, react_2.useCallback)((fieldName, handler) => {
         customFocusHandlers().add(fieldName, handler);

package/build/hooks.d.ts

@@ -63,3 +63,5 @@ export declare const useField: (name: string, options?: {
      */
     formId?: string | undefined;
 } | undefined) => FieldProps;
+export declare const useControlField: <T>(name: string, formId?: string | undefined) => readonly [T, (value: T) => void];
+export declare const useUpdateControlledField: (formId?: string | undefined) => (field: string, value: unknown) => void;

package/build/hooks.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useField = exports.useIsValid = exports.useIsSubmitting = void 0;
+exports.useUpdateControlledField = exports.useControlField = exports.useField = exports.useIsValid = exports.useIsSubmitting = void 0;
 const react_1 = require("react");
 const getInputProps_1 = require("./internal/getInputProps");
 const hooks_1 = require("./internal/hooks");
 const state_1 = require("./internal/state");
+const controlledFields_1 = require("./internal/state/controlledFields");
 /**
  * Returns whether or not the parent form is currently being submitted.
  * This is different from remix's `useTransition().submission` in that it
@@ -77,3 +78,14 @@ const useField = (name, options) => {
     return field;
 };
 exports.useField = useField;
+const useControlField = (name, formId) => {
+    const context = (0, hooks_1.useInternalFormContext)(formId, "useControlField");
+    const [value, setValue] = (0, controlledFields_1.useControllableValue)(context, name);
+    return [value, setValue];
+};
+exports.useControlField = useControlField;
+const useUpdateControlledField = (formId) => {
+    const context = (0, hooks_1.useInternalFormContext)(formId, "useControlField");
+    return (0, controlledFields_1.useUpdateControllableValue)(context.formId);
+};
+exports.useUpdateControlledField = useUpdateControlledField;

package/build/internal/MultiValueMap.d.ts

@@ -1,9 +1,11 @@
 export declare class MultiValueMap<Key, Value> {
     private dict;
     add: (key: Key, value: Value) => void;
+    delete: (key: Key) => void;
     remove: (key: Key, value: Value) => void;
     getAll: (key: Key) => Value[];
     entries: () => IterableIterator<[Key, Value[]]>;
+    values: () => IterableIterator<Value[]>;
     has: (key: Key) => boolean;
 }
 export declare const useMultiValueMap: <Key, Value>() => () => MultiValueMap<Key, Value>;

package/build/internal/MultiValueMap.js

@@ -13,6 +13,9 @@ class MultiValueMap {
                 this.dict.set(key, [value]);
             }
         };
+        this.delete = (key) => {
+            this.dict.delete(key);
+        };
         this.remove = (key, value) => {
             if (!this.dict.has(key))
                 return;
@@ -28,6 +31,7 @@ class MultiValueMap {
             return (_a = this.dict.get(key)) !== null && _a !== void 0 ? _a : [];
         };
         this.entries = () => this.dict.entries();
+        this.values = () => this.dict.values();
         this.has = (key) => this.dict.has(key);
     }
 }

package/build/internal/getInputProps.js

@@ -48,7 +48,8 @@ const createGetInputProps = ({ clearError, validate, defaultValue, touched, setT
         else if (props.type === "radio") {
             inputProps.defaultChecked = (0, getRadioChecked_1.getRadioChecked)(props.value, defaultValue);
         }
-        else {
+        else if (props.value === undefined) {
+            // We should only set the defaultValue if the input is uncontrolled.
             inputProps.defaultValue = defaultValue;
         }
         return (0, omitBy_1.default)(inputProps, (value) => value === undefined);

package/build/internal/reset.d.ts

@@ -0,0 +1,28 @@
+import { InternalFormId } from "./state/atomUtils";
+export declare const resetAtom: {
+    (param: InternalFormId): import("jotai").Atom<null> & {
+        write: (get: {
+            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: unknown) => void;
+        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: null;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};

package/build/internal/reset.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetAtom = void 0;
+const jotai_1 = require("jotai");
+const utils_1 = require("jotai/utils");
+const get_1 = __importDefault(require("lodash/get"));
+const state_1 = require("./state");
+const controlledFields_1 = require("./state/controlledFields");
+exports.resetAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (get, set) => {
+    set((0, state_1.fieldErrorsAtom)(formId), {});
+    set((0, state_1.touchedFieldsAtom)(formId), {});
+    set((0, state_1.hasBeenSubmittedAtom)(formId), false);
+    const { defaultValues } = get((0, state_1.formPropsAtom)(formId));
+    const controlledFields = get((0, controlledFields_1.controlledFieldsAtom)(formId));
+    Object.entries(controlledFields).forEach(([name, atom]) => set(atom, (0, get_1.default)(defaultValues, name)));
+}));

package/build/internal/state/controlledFields.d.ts

@@ -1,5 +1,6 @@
 import { PrimitiveAtom } from "jotai";
-import { InternalFormId } from "./atomUtils";
+import { InternalFormContextValue } from "../formContext";
+import { FieldAtomKey, InternalFormId } from "./atomUtils";
 export declare const controlledFieldsAtom: {
     (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
         write: (get: {
@@ -27,6 +28,60 @@ export declare const controlledFieldsAtom: {
     remove(param: InternalFormId): void;
     setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
 };
+export declare const valueUpdatePromiseAtom: {
+    (param: FieldAtomKey): import("jotai").Atom<Promise<void> | undefined> & {
+        write: (get: {
+            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: Promise<void> | ((prev: Promise<void> | undefined) => Promise<void> | undefined) | undefined) => void;
+        onMount?: (<S extends (update?: Promise<void> | ((prev: Promise<void> | undefined) => Promise<void> | undefined) | undefined) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: Promise<void> | undefined;
+    };
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};
+export declare const resolveValueUpdateAtom: {
+    (param: FieldAtomKey): import("jotai").Atom<(() => void) | undefined> & {
+        write: (get: {
+            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+                unstable_promise: true;
+            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
+        }, set: {
+            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+        }, update: (() => void) | ((prev: (() => void) | undefined) => (() => void) | undefined) | undefined) => void;
+        onMount?: (<S extends (update?: (() => void) | ((prev: (() => void) | undefined) => (() => void) | undefined) | undefined) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: (() => void) | undefined;
+    };
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};
 export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
     write: (get: {
         <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
@@ -49,14 +104,16 @@ export declare const setControlledFieldValueAtom: import("jotai").Atom<null> & {
         formId: InternalFormId;
         field: string;
         value: unknown;
-    }) => Promise<void>;
+    }) => void;
     onMount?: (<S extends (update: {
         formId: InternalFormId;
         field: string;
         value: unknown;
-    }) => Promise<void>>(setAtom: S) => void | (() => void)) | undefined;
+    }) => void>(setAtom: S) => void | (() => void)) | undefined;
 } & {
     init: null;
 };
-export declare const useControlledFieldValue: (formId: InternalFormId, field: string) => any;
-export declare const useControllableValue: (formId: InternalFormId, field: string) => readonly [any, (value: unknown) => Promise<void>];
+export declare const useControlledFieldValue: (context: InternalFormContextValue, field: string) => any;
+export declare const useControllableValue: (context: InternalFormContextValue, field: string) => readonly [any, (value: unknown) => void];
+export declare const useUpdateControllableValue: (formId: InternalFormId) => (field: string, value: unknown) => void;
+export declare const useAwaitValue: (formId: InternalFormId) => (arg: string) => Promise<void>;

package/build/internal/state/controlledFields.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useControllableValue = exports.useControlledFieldValue = exports.setControlledFieldValueAtom = exports.controlledFieldsAtom = void 0;
+exports.useAwaitValue = exports.useUpdateControllableValue = exports.useControllableValue = exports.useControlledFieldValue = exports.setControlledFieldValueAtom = exports.resolveValueUpdateAtom = exports.valueUpdatePromiseAtom = exports.controlledFieldsAtom = void 0;
 const jotai_1 = require("jotai");
+const utils_1 = require("jotai/utils");
 const omit_1 = __importDefault(require("lodash/omit"));
 const react_1 = require("react");
 const hooks_1 = require("../hooks");
@@ -14,7 +15,8 @@ exports.controlledFieldsAtom = (0, atomUtils_1.formAtomFamily)({});
 const refCountAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(0));
 const fieldValueAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
 const fieldValueHydratedAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(false));
-const pendingValidateAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
+exports.valueUpdatePromiseAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
+exports.resolveValueUpdateAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)(undefined));
 const registerAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) => {
     set(refCountAtom({ formId, field }), (prev) => prev + 1);
     const newRefCount = get(refCountAtom({ formId, field }));
@@ -33,22 +35,27 @@ const unregisterAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) =>
     if (newRefCount === 0) {
         set((0, exports.controlledFieldsAtom)(formId), (prev) => (0, omit_1.default)(prev, field));
         fieldValueAtom.remove({ formId, field });
-        pendingValidateAtom.remove({ formId, field });
+        exports.resolveValueUpdateAtom.remove({ formId, field });
         fieldValueHydratedAtom.remove({ formId, field });
     }
 });
-exports.setControlledFieldValueAtom = (0, jotai_1.atom)(null, async (_get, set, { formId, field, value, }) => {
+exports.setControlledFieldValueAtom = (0, jotai_1.atom)(null, (_get, set, { formId, field, value, }) => {
     set(fieldValueAtom({ formId, field }), value);
-    const pending = pendingValidateAtom({ formId, field });
-    await new Promise((resolve) => set(pending, resolve));
-    set(pending, undefined);
+    const resolveAtom = (0, exports.resolveValueUpdateAtom)({ formId, field });
+    const promiseAtom = (0, exports.valueUpdatePromiseAtom)({ formId, field });
+    const promise = new Promise((resolve) => set(resolveAtom, () => {
+        resolve();
+        set(resolveAtom, undefined);
+        set(promiseAtom, undefined);
+    }));
+    set(promiseAtom, promise);
 });
-const useControlledFieldValue = (formId, field) => {
-    const fieldAtom = fieldValueAtom({ formId, field });
+const useControlledFieldValue = (context, field) => {
+    const fieldAtom = fieldValueAtom({ formId: context.formId, field });
     const [value, setValue] = (0, hooks_1.useFormAtom)(fieldAtom);
-    const defaultValue = (0, hooks_1.useFieldDefaultValue)(field, { formId });
-    const isHydrated = (0, hooks_1.useFormAtomValue)((0, state_1.isHydratedAtom)(formId));
-    const [isFieldHydrated, setIsFieldHydrated] = (0, hooks_1.useFormAtom)(fieldValueHydratedAtom({ formId, field }));
+    const defaultValue = (0, hooks_1.useFieldDefaultValue)(field, context);
+    const isHydrated = (0, hooks_1.useFormAtomValue)((0, state_1.isHydratedAtom)(context.formId));
+    const [isFieldHydrated, setIsFieldHydrated] = (0, hooks_1.useFormAtom)(fieldValueHydratedAtom({ formId: context.formId, field }));
     (0, react_1.useEffect)(() => {
         if (isHydrated && !isFieldHydrated) {
             setValue(defaultValue);
@@ -57,7 +64,7 @@ const useControlledFieldValue = (formId, field) => {
     }, [
         defaultValue,
         field,
-        formId,
+        context.formId,
         isFieldHydrated,
         isHydrated,
         setIsFieldHydrated,
@@ -66,20 +73,31 @@ const useControlledFieldValue = (formId, field) => {
     return isFieldHydrated ? value : defaultValue;
 };
 exports.useControlledFieldValue = useControlledFieldValue;
-const useControllableValue = (formId, field) => {
-    const pending = (0, hooks_1.useFormAtomValue)(pendingValidateAtom({ formId, field }));
+const useControllableValue = (context, field) => {
+    const resolveUpdate = (0, hooks_1.useFormAtomValue)((0, exports.resolveValueUpdateAtom)({ formId: context.formId, field }));
     (0, react_1.useEffect)(() => {
-        pending === null || pending === void 0 ? void 0 : pending();
-    }, [pending]);
+        resolveUpdate === null || resolveUpdate === void 0 ? void 0 : resolveUpdate();
+    }, [resolveUpdate]);
     const register = (0, hooks_1.useFormUpdateAtom)(registerAtom);
     const unregister = (0, hooks_1.useFormUpdateAtom)(unregisterAtom);
     (0, react_1.useEffect)(() => {
-        register({ formId, field });
-        return () => unregister({ formId, field });
-    }, [field, formId, register, unregister]);
+        register({ formId: context.formId, field });
+        return () => unregister({ formId: context.formId, field });
+    }, [context.formId, field, register, unregister]);
     const setControlledFieldValue = (0, hooks_1.useFormUpdateAtom)(exports.setControlledFieldValueAtom);
-    const setValue = (0, react_1.useCallback)((value) => setControlledFieldValue({ formId, field, value }), [field, formId, setControlledFieldValue]);
-    const value = (0, exports.useControlledFieldValue)(formId, field);
+    const setValue = (0, react_1.useCallback)((value) => setControlledFieldValue({ formId: context.formId, field, value }), [field, context.formId, setControlledFieldValue]);
+    const value = (0, exports.useControlledFieldValue)(context, field);
     return [value, setValue];
 };
 exports.useControllableValue = useControllableValue;
+const useUpdateControllableValue = (formId) => {
+    const setControlledFieldValue = (0, hooks_1.useFormUpdateAtom)(exports.setControlledFieldValueAtom);
+    return (0, react_1.useCallback)((field, value) => setControlledFieldValue({ formId, field, value }), [formId, setControlledFieldValue]);
+};
+exports.useUpdateControllableValue = useUpdateControllableValue;
+const useAwaitValue = (formId) => {
+    return (0, utils_1.useAtomCallback)((0, react_1.useCallback)(async (get, _set, field) => {
+        await get((0, exports.valueUpdatePromiseAtom)({ formId, field }));
+    }, [formId]));
+};
+exports.useAwaitValue = useAwaitValue;

package/build/internal/state.d.ts

@@ -206,33 +206,6 @@ export declare const isValidAtom: {
     remove(param: InternalFormId): void;
     setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
 };
-export declare const resetAtom: {
-    (param: InternalFormId): import("jotai").Atom<null> & {
-        write: (get: {
-            <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
-            <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
-            <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
-        } & {
-            <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
-                unstable_promise: true;
-            }): Value_3 | Promise<Value_3>;
-            <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
-                unstable_promise: true;
-            }): Value_4 | Promise<Value_4>;
-            <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
-                unstable_promise: true;
-            }): (Value_5 extends Promise<infer V> ? V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V : Value_5>;
-        }, set: {
-            <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
-            <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
-        }, update: unknown) => void;
-        onMount?: (<S extends (update?: unknown) => void>(setAtom: S) => void | (() => void)) | undefined;
-    } & {
-        init: null;
-    };
-    remove(param: InternalFormId): void;
-    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
-};
 export declare const startSubmitAtom: {
     (param: InternalFormId): import("jotai").Atom<null> & {
         write: (get: {

package/build/internal/state.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fieldDefaultValueAtom = exports.fieldErrorAtom = exports.fieldTouchedAtom = exports.setFieldErrorAtom = exports.setTouchedAtom = exports.endSubmitAtom = exports.startSubmitAtom = exports.resetAtom = exports.isValidAtom = exports.cleanupFormState = exports.formElementAtom = exports.formPropsAtom = exports.touchedFieldsAtom = exports.fieldErrorsAtom = exports.hasBeenSubmittedAtom = exports.isSubmittingAtom = exports.isHydratedAtom = exports.ATOM_SCOPE = void 0;
+exports.fieldDefaultValueAtom = exports.fieldErrorAtom = exports.fieldTouchedAtom = exports.setFieldErrorAtom = exports.setTouchedAtom = exports.endSubmitAtom = exports.startSubmitAtom = exports.isValidAtom = exports.cleanupFormState = exports.formElementAtom = exports.formPropsAtom = exports.touchedFieldsAtom = exports.fieldErrorsAtom = exports.hasBeenSubmittedAtom = exports.isSubmittingAtom = exports.isHydratedAtom = exports.ATOM_SCOPE = void 0;
 const jotai_1 = require("jotai");
 const utils_1 = require("jotai/utils");
 const omit_1 = __importDefault(require("lodash/omit"));
@@ -33,11 +33,6 @@ const cleanupFormState = (formId) => {
 };
 exports.cleanupFormState = cleanupFormState;
 exports.isValidAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)((get) => Object.keys(get((0, exports.fieldErrorsAtom)(formId))).length === 0));
-exports.resetAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (_get, set) => {
-    set((0, exports.fieldErrorsAtom)(formId), {});
-    set((0, exports.touchedFieldsAtom)(formId), {});
-    set((0, exports.hasBeenSubmittedAtom)(formId), false);
-}));
 exports.startSubmitAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (_get, set) => {
     set((0, exports.isSubmittingAtom)(formId), true);
     set((0, exports.hasBeenSubmittedAtom)(formId), true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",

package/src/ValidatedForm.tsx

@@ -1,4 +1,5 @@
 import { Form as RemixForm, useFetcher, useSubmit } from "@remix-run/react";
+import { useAtomCallback } from "jotai/utils";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
@@ -24,6 +25,7 @@ import {
   useHasActiveFormSubmit,
 } from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
+import { resetAtom } from "./internal/reset";
 import {
   cleanupFormState,
   endSubmitAtom,
@@ -31,11 +33,11 @@ import {
   formElementAtom,
   formPropsAtom,
   isHydratedAtom,
-  resetAtom,
   setFieldErrorAtom,
   startSubmitAtom,
   SyncedFormProps,
 } from "./internal/state";
+import { useAwaitValue } from "./internal/state/controlledFields";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
@@ -246,9 +248,11 @@ export function ValidatedForm<DataType>({
     return () => cleanupFormState(formId);
   }, [formId, setHydrated]);
 
+  const awaitValue = useAwaitValue(formId);
   const validateField: SyncedFormProps["validateField"] = useCallback(
     async (field) => {
       invariant(formRef.current, "Cannot find reference to form");
+      await awaitValue(field);
       const { error } = await validator.validateField(
         getDataFromForm(formRef.current),
         field
@@ -262,7 +266,7 @@ export function ValidatedForm<DataType>({
         return null;
       }
     },
-    [setFieldError, validator]
+    [awaitValue, setFieldError, validator]
   );
 
   const customFocusHandlers = useMultiValueMap<string, () => void>();

package/src/hooks.ts

@@ -17,6 +17,10 @@ import {
   isSubmittingAtom,
   isValidAtom,
 } from "./internal/state";
+import {
+  useControllableValue,
+  useUpdateControllableValue,
+} from "./internal/state/controlledFields";
 
 /**
  * Returns whether or not the parent form is currently being submitted.
@@ -148,3 +152,14 @@ export const useField = (
 
   return field;
 };
+
+export const useControlField = <T>(name: string, formId?: string) => {
+  const context = useInternalFormContext(formId, "useControlField");
+  const [value, setValue] = useControllableValue(context, name);
+  return [value as T, setValue as (value: T) => void] as const;
+};
+
+export const useUpdateControlledField = (formId?: string) => {
+  const context = useInternalFormContext(formId, "useControlField");
+  return useUpdateControllableValue(context.formId);
+};

package/src/internal/MultiValueMap.ts

@@ -11,6 +11,10 @@ export class MultiValueMap<Key, Value> {
     }
   };
 
+  delete = (key: Key) => {
+    this.dict.delete(key);
+  };
+
   remove = (key: Key, value: Value) => {
     if (!this.dict.has(key)) return;
     const array = this.dict.get(key)!;
@@ -25,6 +29,8 @@ export class MultiValueMap<Key, Value> {
 
   entries = (): IterableIterator<[Key, Value[]]> => this.dict.entries();
 
+  values = (): IterableIterator<Value[]> => this.dict.values();
+
   has = (key: Key): boolean => this.dict.has(key);
 }
 

package/src/internal/getInputProps.ts

@@ -84,7 +84,8 @@ export const createGetInputProps = ({
       inputProps.defaultChecked = getCheckboxChecked(props.value, defaultValue);
     } else if (props.type === "radio") {
       inputProps.defaultChecked = getRadioChecked(props.value, defaultValue);
-    } else {
+    } else if (props.value === undefined) {
+      // We should only set the defaultValue if the input is uncontrolled.
       inputProps.defaultValue = defaultValue;
     }
 

package/src/internal/reset.ts

@@ -0,0 +1,26 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import lodashGet from "lodash/get";
+import {
+  fieldErrorsAtom,
+  formPropsAtom,
+  hasBeenSubmittedAtom,
+  touchedFieldsAtom,
+} from "./state";
+import { InternalFormId } from "./state/atomUtils";
+import { controlledFieldsAtom } from "./state/controlledFields";
+
+export const resetAtom = atomFamily((formId: InternalFormId) =>
+  atom(null, (get, set) => {
+    set(fieldErrorsAtom(formId), {});
+    set(touchedFieldsAtom(formId), {});
+    set(hasBeenSubmittedAtom(formId), false);
+
+    const { defaultValues } = get(formPropsAtom(formId));
+
+    const controlledFields = get(controlledFieldsAtom(formId));
+    Object.entries(controlledFields).forEach(([name, atom]) =>
+      set(atom, lodashGet(defaultValues, name))
+    );
+  })
+);

package/src/internal/state/controlledFields.ts

@@ -0,0 +1,170 @@
+import { atom, PrimitiveAtom } from "jotai";
+import { useAtomCallback } from "jotai/utils";
+import omit from "lodash/omit";
+import { useCallback, useEffect } from "react";
+import { InternalFormContextValue } from "../formContext";
+import {
+  useFieldDefaultValue,
+  useFormAtomValue,
+  useFormAtom,
+  useFormUpdateAtom,
+} from "../hooks";
+import { isHydratedAtom } from "../state";
+import {
+  fieldAtomFamily,
+  FieldAtomKey,
+  formAtomFamily,
+  InternalFormId,
+} from "./atomUtils";
+
+export const controlledFieldsAtom = formAtomFamily<
+  Record<string, PrimitiveAtom<unknown>>
+>({});
+const refCountAtom = fieldAtomFamily(() => atom(0));
+const fieldValueAtom = fieldAtomFamily(() => atom<unknown>(undefined));
+const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
+
+export const valueUpdatePromiseAtom = fieldAtomFamily(() =>
+  atom<Promise<void> | undefined>(undefined)
+);
+export const resolveValueUpdateAtom = fieldAtomFamily(() =>
+  atom<(() => void) | undefined>(undefined)
+);
+
+const registerAtom = atom(null, (get, set, { formId, field }: FieldAtomKey) => {
+  set(refCountAtom({ formId, field }), (prev) => prev + 1);
+  const newRefCount = get(refCountAtom({ formId, field }));
+  // We don't set hydrated here because it gets set when we know
+  // we have the right default values
+  if (newRefCount === 1) {
+    set(controlledFieldsAtom(formId), (prev) => ({
+      ...prev,
+      [field]: fieldValueAtom({ formId, field }),
+    }));
+  }
+});
+
+const unregisterAtom = atom(
+  null,
+  (get, set, { formId, field }: FieldAtomKey) => {
+    set(refCountAtom({ formId, field }), (prev) => prev - 1);
+    const newRefCount = get(refCountAtom({ formId, field }));
+    if (newRefCount === 0) {
+      set(controlledFieldsAtom(formId), (prev) => omit(prev, field));
+      fieldValueAtom.remove({ formId, field });
+      resolveValueUpdateAtom.remove({ formId, field });
+      fieldValueHydratedAtom.remove({ formId, field });
+    }
+  }
+);
+
+export const setControlledFieldValueAtom = atom(
+  null,
+  (
+    _get,
+    set,
+    {
+      formId,
+      field,
+      value,
+    }: { formId: InternalFormId; field: string; value: unknown }
+  ) => {
+    set(fieldValueAtom({ formId, field }), value);
+    const resolveAtom = resolveValueUpdateAtom({ formId, field });
+    const promiseAtom = valueUpdatePromiseAtom({ formId, field });
+
+    const promise = new Promise<void>((resolve) =>
+      set(resolveAtom, () => {
+        resolve();
+        set(resolveAtom, undefined);
+        set(promiseAtom, undefined);
+      })
+    );
+    set(promiseAtom, promise);
+  }
+);
+
+export const useControlledFieldValue = (
+  context: InternalFormContextValue,
+  field: string
+) => {
+  const fieldAtom = fieldValueAtom({ formId: context.formId, field });
+  const [value, setValue] = useFormAtom(fieldAtom);
+
+  const defaultValue = useFieldDefaultValue(field, context);
+  const isHydrated = useFormAtomValue(isHydratedAtom(context.formId));
+  const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(
+    fieldValueHydratedAtom({ formId: context.formId, field })
+  );
+
+  useEffect(() => {
+    if (isHydrated && !isFieldHydrated) {
+      setValue(defaultValue);
+      setIsFieldHydrated(true);
+    }
+  }, [
+    defaultValue,
+    field,
+    context.formId,
+    isFieldHydrated,
+    isHydrated,
+    setIsFieldHydrated,
+    setValue,
+  ]);
+
+  return isFieldHydrated ? value : defaultValue;
+};
+
+export const useControllableValue = (
+  context: InternalFormContextValue,
+  field: string
+) => {
+  const resolveUpdate = useFormAtomValue(
+    resolveValueUpdateAtom({ formId: context.formId, field })
+  );
+  useEffect(() => {
+    resolveUpdate?.();
+  }, [resolveUpdate]);
+
+  const register = useFormUpdateAtom(registerAtom);
+  const unregister = useFormUpdateAtom(unregisterAtom);
+  useEffect(() => {
+    register({ formId: context.formId, field });
+    return () => unregister({ formId: context.formId, field });
+  }, [context.formId, field, register, unregister]);
+
+  const setControlledFieldValue = useFormUpdateAtom(
+    setControlledFieldValueAtom
+  );
+  const setValue = useCallback(
+    (value: unknown) =>
+      setControlledFieldValue({ formId: context.formId, field, value }),
+    [field, context.formId, setControlledFieldValue]
+  );
+
+  const value = useControlledFieldValue(context, field);
+
+  return [value, setValue] as const;
+};
+
+export const useUpdateControllableValue = (formId: InternalFormId) => {
+  const setControlledFieldValue = useFormUpdateAtom(
+    setControlledFieldValueAtom
+  );
+  return useCallback(
+    (field: string, value: unknown) =>
+      setControlledFieldValue({ formId, field, value }),
+    [formId, setControlledFieldValue]
+  );
+};
+
+export const useAwaitValue = (formId: InternalFormId) => {
+  return useAtomCallback(
+    useCallback(
+      async (get, _set, field: string) => {
+        await get(valueUpdatePromiseAtom({ formId, field }));
+      },
+      [formId]
+    )
+  );
+};

package/src/internal/state.ts

@@ -48,14 +48,6 @@ export const isValidAtom = atomFamily((formId: InternalFormId) =>
   atom((get) => Object.keys(get(fieldErrorsAtom(formId))).length === 0)
 );
 
-export const resetAtom = atomFamily((formId: InternalFormId) =>
-  atom(null, (_get, set) => {
-    set(fieldErrorsAtom(formId), {});
-    set(touchedFieldsAtom(formId), {});
-    set(hasBeenSubmittedAtom(formId), false);
-  })
-);
-
 export const startSubmitAtom = atomFamily((formId: InternalFormId) =>
   atom(null, (_get, set) => {
     set(isSubmittingAtom(formId), true);