remix-validated-form 4.1.2 → 4.1.3

package/.turbo/turbo-build.log

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

package/browser/ValidatedForm.js

@@ -187,9 +187,9 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 clickedButtonRef.current = submitButton;
             }
         }
-        window.addEventListener("click", handleClick);
+        window.addEventListener("click", handleClick, { capture: true });
         return () => {
-            window.removeEventListener("click", handleClick);
+            window.removeEventListener("click", handleClick, { capture: true });
         };
     }, []);
     const handleSubmit = async (e) => {
@@ -209,10 +209,15 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
                 endSubmit({ formAtom });
                 return;
             }
+            // We deviate from the remix code here a bit because of our async submit.
+            // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
+            // but we already have the form in `formRef.current` so we can just use that.
+            // If we use `event.currentTarget` here, it will break because `currentTarget`
+            // will have changed since the start of the submission.
             if (fetcher)
-                fetcher.submit(clickedButtonRef.current || e.currentTarget);
+                fetcher.submit(clickedButtonRef.current || formRef.current);
             else
-                submit(clickedButtonRef.current || e.currentTarget, {
+                submit(clickedButtonRef.current || formRef.current, {
                     method,
                     replace,
                 });

package/browser/internal/logic/getCheckboxChecked.js

@@ -1,6 +1,6 @@
 export const getCheckboxChecked = (checkboxValue = "on", newValue) => {
     if (Array.isArray(newValue))
-        return newValue.includes(checkboxValue);
+        return newValue.some((val) => val === true || val === checkboxValue);
     if (typeof newValue === "boolean")
         return newValue;
     if (typeof newValue === "string")

package/browser/internal/logic/setInputValueInForm.d.ts

@@ -1 +1 @@
-export declare const setInputValueInForm: (formElement: HTMLFormElement, name: string, value: unknown) => void;
+export declare const setInputValueInForm: (formElement: HTMLFormElement, name: string, value: unknown[]) => void;

package/browser/internal/logic/setInputValueInForm.js

@@ -1,40 +1,120 @@
 import invariant from "tiny-invariant";
 import { getCheckboxChecked } from "./getCheckboxChecked";
-import { getRadioChecked } from "./getRadioChecked";
-const setElementValue = (element, value, name) => {
-    if (element instanceof HTMLSelectElement && element.multiple) {
-        invariant(Array.isArray(value), "Must specify an array to set the value for a multi-select");
+/**
+ * Helper class to track the values being set on uncontrolled fields.
+ * HTML is super permissive with inputs that all share the same `name`.
+ *
+ * This class is strict in the sense that, if the user provides an array value,
+ * the values inside the array must be in the same order as the elements in the DOM.
+ * Doing this allows us to be flexible with what types of form controls the user is using.
+ *
+ * This is how HTML tracks inputs of the same name as well.
+ * `new FormData(formElement).getAll('myField')` will return values in DOM order.
+ */
+class Values {
+    constructor(values) {
+        this.hasSetRadioValue = false;
+        this.bool = (value) => {
+            if (getCheckboxChecked(value, this.values[0])) {
+                this.values.shift();
+                return true;
+            }
+            return false;
+        };
+        this.radio = (value) => {
+            if (this.hasSetRadioValue)
+                return false;
+            const result = this.bool(value);
+            if (result)
+                this.hasSetRadioValue = true;
+            return result;
+        };
+        this.str = () => { var _a; return String((_a = this.values.pop()) !== null && _a !== void 0 ? _a : ""); };
+        this.allValues = () => this.values;
+        this.warnIfLeftovers = (field) => {
+            if (this.values.length > 0) {
+                console.warn(`Could not determine how to use the value for the field ${field}. ` +
+                    `Leftover values were: ${this.values.join(", ")}.`);
+            }
+        };
+        const unknownValues = Array.isArray(values) ? values : [values];
+        this.values = unknownValues;
+    }
+}
+/**
+ * This subclass is order-permissive, meaning the user doesn't have to worry about
+ * the order in which the inputs occur in the DOM.
+ * This is useful for multiselects and checkbox groups and provides a better DX than
+ * the order-strict version.
+ */
+class PermissiveValues extends Values {
+    constructor() {
+        super(...arguments);
+        this.remove = (value) => {
+            const index = this.values.indexOf(value);
+            const deleted = this.values.splice(index, 1);
+            return deleted.length > 0;
+        };
+        this.bool = (value) => {
+            if (getCheckboxChecked(value, this.values)) {
+                this.remove(value) || this.remove(true);
+                return true;
+            }
+            return false;
+        };
+    }
+}
+const isMultiselect = (node) => node instanceof HTMLSelectElement && node.multiple;
+const isCheckbox = (node) => node instanceof HTMLInputElement && node.type === "checkbox";
+const isRadio = (node) => node instanceof HTMLInputElement && node.type === "radio";
+const setElementValue = (element, values, field) => {
+    if (isMultiselect(element)) {
         for (const option of element.options) {
-            option.selected = value.includes(option.value);
+            option.selected = values.bool(option.value);
         }
         return;
     }
-    if (element instanceof HTMLInputElement && element.type === "checkbox") {
-        const newChecked = getCheckboxChecked(element.value, value);
-        invariant(newChecked !== undefined, `Unable to determine if checkbox should be checked. Provided value was ${value} for checkbox ${name}.`);
-        element.checked = newChecked;
+    if (isCheckbox(element)) {
+        element.checked = values.bool(element.value);
         return;
     }
-    if (element instanceof HTMLInputElement && element.type === "radio") {
-        const newChecked = getRadioChecked(element.value, value);
-        invariant(newChecked !== undefined, `Unable to determine if radio should be checked. Provided value was ${value} for radio ${name}.`);
-        element.checked = newChecked;
+    if (isRadio(element)) {
+        element.checked = values.radio(element.value);
         return;
     }
-    invariant(typeof value === "string", `Invalid value for field "${name}" which is an ${element.constructor.name}. Expected string but received ${typeof value}`);
     const input = element;
-    input.value = value;
+    invariant(input.type !== "hidden", `Cannot set value on hidden input if it is not a controlled field. Field being updated was ${field}.`);
+    input.value = values.str();
+};
+const areElementsTheSameType = (nodes) => {
+    const getType = (node) => {
+        if (node instanceof HTMLInputElement)
+            return node.type;
+        if (node instanceof HTMLSelectElement)
+            return node.multiple ? "select" : "multiselect";
+        return null;
+    };
+    const firstElementInstance = nodes[0].constructor;
+    const firstElementType = getType(nodes[0]);
+    return nodes.every((element) => element.constructor === firstElementInstance &&
+        getType(element) === firstElementType);
 };
 export const setInputValueInForm = (formElement, name, value) => {
     const controlElement = formElement.elements.namedItem(name);
     if (!controlElement)
         return;
     if (controlElement instanceof RadioNodeList) {
+        const values = areElementsTheSameType([...controlElement])
+            ? new PermissiveValues(value)
+            : new Values(value);
         for (const element of controlElement) {
-            setElementValue(element, value, name);
+            setElementValue(element, values, name);
         }
+        values.warnIfLeftovers(name);
     }
     else {
-        setElementValue(controlElement, value, name);
+        const values = new PermissiveValues(value);
+        setElementValue(controlElement, values, name);
+        values.warnIfLeftovers(name);
     }
 };

package/browser/internal/setFieldValue.d.ts

@@ -0,0 +1,20 @@
+import { InternalFormId } from "./state/atomUtils";
+declare type ControlledDataItem = Record<string, unknown[]>;
+declare class ValidatedFormData {
+    #private;
+    constructor(formData: FormData, customData: ControlledDataItem);
+    get: (fieldName: string) => any;
+    getAll: (fieldName: string) => any[];
+    has: (fieldName: string) => boolean;
+    append: (fieldName: string, value: any) => void;
+    delete: (fieldName: string) => void;
+    set: (fieldName: string, value: any) => void;
+    entries: () => IterableIterator<[string, any[]]>;
+    values: () => IterableIterator<any[]>;
+    [Symbol.iterator]: () => IterableIterator<[string, any[]]>;
+    setRepeated: (fieldName: string, value: any[]) => void;
+    changedFields(): Generator<readonly [string, any[]], void, unknown>;
+}
+export declare type FormValuesUpdater = (formData: ValidatedFormData) => void;
+export declare const useSetFormValues: (formId: InternalFormId) => (arg: FormValuesUpdater) => Promise<void>;
+export {};

package/browser/internal/setFieldValue.js

@@ -0,0 +1,83 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ValidatedFormData_data, _ValidatedFormData_updates, _a;
+import { useAtomCallback } from "jotai/utils";
+import groupBy from "lodash/groupBy";
+import mapValues from "lodash/mapValues";
+import invariant from "tiny-invariant";
+import { setInputValueInForm } from "./logic/setInputValueInForm";
+import { MultiValueMap } from "./MultiValueMap";
+import { ATOM_SCOPE, formElementAtom } from "./state";
+import { controlledFieldsAtom, setControlledFieldValueAtom, } from "./state/controlledFields";
+class ValidatedFormData {
+    constructor(formData, customData) {
+        _ValidatedFormData_data.set(this, new MultiValueMap());
+        _ValidatedFormData_updates.set(this, new Map());
+        // API to mimic form data
+        this.get = (fieldName) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").getAll(fieldName)[0];
+        this.getAll = (fieldName) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").getAll(fieldName);
+        this.has = (fieldName) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").has(fieldName);
+        this.append = (fieldName, value) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(fieldName, value);
+        };
+        this.delete = (fieldName) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").delete(fieldName);
+            __classPrivateFieldGet(this, _ValidatedFormData_updates, "f").set(fieldName, true);
+        };
+        this.set = (fieldName, value) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").delete(fieldName);
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(fieldName, value);
+            __classPrivateFieldGet(this, _ValidatedFormData_updates, "f").set(fieldName, true);
+        };
+        this.entries = () => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").entries();
+        this.values = () => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").values();
+        this[_a] = () => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").entries();
+        // Custom APIs
+        this.setRepeated = (fieldName, value) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").delete(fieldName);
+            value.forEach((val) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(fieldName, val));
+            __classPrivateFieldGet(this, _ValidatedFormData_updates, "f").set(fieldName, true);
+        };
+        for (const [key, value] of formData.entries()) {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(key, value);
+        }
+        Object.entries(customData).forEach(([name, values]) => {
+            __classPrivateFieldGet(this, _ValidatedFormData_data, "f").delete(name);
+            values.forEach((value) => __classPrivateFieldGet(this, _ValidatedFormData_data, "f").add(name, value));
+        });
+    }
+    *changedFields() {
+        for (const updatedField of __classPrivateFieldGet(this, _ValidatedFormData_updates, "f").keys()) {
+            const value = this.getAll(updatedField);
+            yield [updatedField, value];
+        }
+    }
+}
+_ValidatedFormData_data = new WeakMap(), _ValidatedFormData_updates = new WeakMap(), _a = Symbol.iterator;
+export const useSetFormValues = (formId) => useAtomCallback(async (get, set, update) => {
+    var _b;
+    const form = get(formElementAtom(formId));
+    invariant(form, "Unable to access form element when setting field value. This is likely a bug in remix-validated-form.");
+    const formData = new FormData(form);
+    const controlledFields = get(controlledFieldsAtom(formId));
+    const controlledData = mapValues(groupBy(controlledFields, (field) => field.name), (val) => val.map((field) => get(field.valueAtom)));
+    const validatedFormData = new ValidatedFormData(formData, controlledData);
+    update(validatedFormData);
+    for (const [field, value] of validatedFormData.changedFields()) {
+        const relevantFields = controlledFields.filter(({ name }) => name === field);
+        if (relevantFields.length === 0) {
+            setInputValueInForm(form, field, value);
+            return;
+        }
+        for (const [index, field] of relevantFields.entries()) {
+            const itemValue = (_b = value[index]) !== null && _b !== void 0 ? _b : "";
+            await set(setControlledFieldValueAtom, {
+                internalFieldId: field.internalId,
+                value: itemValue,
+            });
+        }
+    }
+}, ATOM_SCOPE);

package/browser/internal/setFormValues.d.ts

@@ -0,0 +1,2 @@
+import { InternalFormId } from "./state/atomUtils";
+export declare const useSetFormValues: (formId: InternalFormId) => (arg: Record<string, unknown>) => Promise<void>;

package/browser/internal/setFormValues.js

@@ -0,0 +1,26 @@
+import { useAtomCallback } from "jotai/utils";
+import { useCallback } from "react";
+import invariant from "tiny-invariant";
+import { setInputValueInForm } from "./logic/setInputValueInForm";
+import { ATOM_SCOPE, formElementAtom } from "./state";
+import { controlledFieldsAtom, setControlledFieldValueAtom, } from "./state/controlledFields";
+export const useSetFormValues = (formId) => useAtomCallback(useCallback(async (get, set, updatedValues) => {
+    const form = get(formElementAtom(formId));
+    invariant(form, "Unable to access form element when setting field value. This is likely a bug in remix-validated-form.");
+    const controlledFields = get(controlledFieldsAtom(formId));
+    const updatePromises = [];
+    for (const [field, value] of Object.entries(updatedValues)) {
+        const isControlled = !!controlledFields[field];
+        if (isControlled) {
+            updatePromises.push(set(setControlledFieldValueAtom, {
+                field,
+                formId,
+                value,
+            }));
+        }
+        else {
+            setInputValueInForm(form, field, Array.isArray(value) ? value : [value]);
+        }
+    }
+    await Promise.all(updatePromises);
+}, [formId]), ATOM_SCOPE);

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

@@ -0,0 +1,38 @@
+import { Atom } from "jotai";
+export declare type InternalFormId = string | symbol;
+export declare const formAtomFamily: <T>(data: T) => {
+    (param: InternalFormId): Atom<T> & {
+        write: (get: {
+            <Value>(atom: Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: 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: T | ((prev: T) => T)) => void;
+        onMount?: (<S extends import("jotai/core/atom").SetAtom<T | ((prev: T) => T), void>>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: T;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};
+export declare type FieldAtomKey = {
+    formId: InternalFormId;
+    field: string;
+};
+export declare const fieldAtomFamily: <T extends Atom<unknown>>(func: (key: FieldAtomKey) => T) => {
+    (param: FieldAtomKey): T;
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};

package/browser/internal/state/atomUtils.js

@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import isEqual from "lodash/isEqual";
+export const formAtomFamily = (data) => atomFamily((_) => atom(data));
+export const fieldAtomFamily = (func) => atomFamily(func, isEqual);

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

@@ -0,0 +1,66 @@
+import { PrimitiveAtom } from "jotai";
+import { InternalFormId } from "./atomUtils";
+export declare type ValueSerializer = (val: unknown) => string;
+export declare const controlledFieldsAtom: {
+    (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
+        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: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void;
+        onMount?: (<S extends (update: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: Record<string, PrimitiveAtom<unknown>>;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};
+export declare const setControlledFieldValueAtom: 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: {
+        formId: InternalFormId;
+        field: string;
+        value: unknown;
+    }) => Promise<void>;
+    onMount?: (<S extends (update: {
+        formId: InternalFormId;
+        field: string;
+        value: unknown;
+    }) => Promise<void>>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const useAllControlledFields: (formId: InternalFormId) => Record<string, PrimitiveAtom<unknown>>;
+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 useFieldSerializer: (formId: InternalFormId, field: string) => ValueSerializer;
+export declare const useRegisterFieldSerializer: (formId: InternalFormId, field: string, serializer?: ValueSerializer | undefined) => void;

package/browser/internal/state/controlledFields.js

@@ -0,0 +1,93 @@
+import { atom } from "jotai";
+import omit from "lodash/omit";
+import { useCallback, useEffect } from "react";
+import { useFieldDefaultValue, useFormAtomValue, useFormAtom, useFormUpdateAtom, } from "../hooks";
+import { isHydratedAtom } from "../state";
+import { fieldAtomFamily, formAtomFamily, } from "./atomUtils";
+export const controlledFieldsAtom = formAtomFamily({});
+const refCountAtom = fieldAtomFamily(() => atom(0));
+const fieldValueAtom = fieldAtomFamily(() => atom(undefined));
+const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
+const pendingValidateAtom = fieldAtomFamily(() => atom(undefined));
+const valueSerializerAtom = fieldAtomFamily(() => atom({
+    serializer: (value) => {
+        if (value === undefined)
+            return "";
+        return JSON.stringify(value);
+    },
+}));
+const registerAtom = atom(null, (get, set, { formId, field }) => {
+    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 }) => {
+    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 });
+        pendingValidateAtom.remove({ formId, field });
+        fieldValueHydratedAtom.remove({ formId, field });
+    }
+});
+export const setControlledFieldValueAtom = atom(null, async (_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);
+});
+export const useAllControlledFields = (formId) => useFormAtomValue(controlledFieldsAtom(formId));
+export const useControlledFieldValue = (formId, field) => {
+    const fieldAtom = fieldValueAtom({ formId, field });
+    const [value, setValue] = useFormAtom(fieldAtom);
+    const defaultValue = useFieldDefaultValue(field, { formId });
+    const isHydrated = useFormAtomValue(isHydratedAtom(formId));
+    const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(fieldValueHydratedAtom({ formId, field }));
+    useEffect(() => {
+        if (isHydrated && !isFieldHydrated) {
+            setValue(defaultValue);
+            setIsFieldHydrated(true);
+        }
+    }, [
+        defaultValue,
+        field,
+        formId,
+        isFieldHydrated,
+        isHydrated,
+        setIsFieldHydrated,
+        setValue,
+    ]);
+    return isFieldHydrated ? value : defaultValue;
+};
+export const useControllableValue = (formId, field) => {
+    const pending = useFormAtomValue(pendingValidateAtom({ formId, field }));
+    useEffect(() => {
+        pending === null || pending === void 0 ? void 0 : pending();
+    }, [pending]);
+    const register = useFormUpdateAtom(registerAtom);
+    const unregister = useFormUpdateAtom(unregisterAtom);
+    useEffect(() => {
+        register({ formId, field });
+        return () => unregister({ formId, field });
+    }, [field, formId, register, unregister]);
+    const setControlledFieldValue = useFormUpdateAtom(setControlledFieldValueAtom);
+    const setValue = useCallback((value) => setControlledFieldValue({ formId, field, value }), [field, formId, setControlledFieldValue]);
+    const value = useControlledFieldValue(formId, field);
+    return [value, setValue];
+};
+export const useFieldSerializer = (formId, field) => useFormAtomValue(valueSerializerAtom({ formId, field })).serializer;
+export const useRegisterFieldSerializer = (formId, field, serializer) => {
+    const setSerializer = useFormUpdateAtom(valueSerializerAtom({ formId, field }));
+    useEffect(() => {
+        if (serializer)
+            setSerializer({ serializer });
+    }, [serializer, setSerializer]);
+};

package/browser/internal/state/setFieldValue.js

@@ -0,0 +1 @@
+"use strict";

package/build/ValidatedForm.js

@@ -212,9 +212,9 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 clickedButtonRef.current = submitButton;
             }
         }
-        window.addEventListener("click", handleClick);
+        window.addEventListener("click", handleClick, { capture: true });
         return () => {
-            window.removeEventListener("click", handleClick);
+            window.removeEventListener("click", handleClick, { capture: true });
         };
     }, []);
     const handleSubmit = async (e) => {
@@ -234,10 +234,15 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
                 endSubmit({ formAtom });
                 return;
             }
+            // We deviate from the remix code here a bit because of our async submit.
+            // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
+            // but we already have the form in `formRef.current` so we can just use that.
+            // If we use `event.currentTarget` here, it will break because `currentTarget`
+            // will have changed since the start of the submission.
             if (fetcher)
-                fetcher.submit(clickedButtonRef.current || e.currentTarget);
+                fetcher.submit(clickedButtonRef.current || formRef.current);
             else
-                submit(clickedButtonRef.current || e.currentTarget, {
+                submit(clickedButtonRef.current || formRef.current, {
                     method,
                     replace,
                 });

package/build/internal/logic/getCheckboxChecked.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCheckboxChecked = void 0;
 const getCheckboxChecked = (checkboxValue = "on", newValue) => {
     if (Array.isArray(newValue))
-        return newValue.includes(checkboxValue);
+        return newValue.some((val) => val === true || val === checkboxValue);
     if (typeof newValue === "boolean")
         return newValue;
     if (typeof newValue === "string")

package/build/internal/logic/setInputValueInForm.d.ts

@@ -1 +1 @@
-export declare const setInputValueInForm: (formElement: HTMLFormElement, name: string, value: unknown) => void;
+export declare const setInputValueInForm: (formElement: HTMLFormElement, name: string, value: unknown[]) => void;

package/build/internal/logic/setInputValueInForm.js

@@ -6,42 +6,122 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setInputValueInForm = void 0;
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const getCheckboxChecked_1 = require("./getCheckboxChecked");
-const getRadioChecked_1 = require("./getRadioChecked");
-const setElementValue = (element, value, name) => {
-    if (element instanceof HTMLSelectElement && element.multiple) {
-        (0, tiny_invariant_1.default)(Array.isArray(value), "Must specify an array to set the value for a multi-select");
+/**
+ * Helper class to track the values being set on uncontrolled fields.
+ * HTML is super permissive with inputs that all share the same `name`.
+ *
+ * This class is strict in the sense that, if the user provides an array value,
+ * the values inside the array must be in the same order as the elements in the DOM.
+ * Doing this allows us to be flexible with what types of form controls the user is using.
+ *
+ * This is how HTML tracks inputs of the same name as well.
+ * `new FormData(formElement).getAll('myField')` will return values in DOM order.
+ */
+class Values {
+    constructor(values) {
+        this.hasSetRadioValue = false;
+        this.bool = (value) => {
+            if ((0, getCheckboxChecked_1.getCheckboxChecked)(value, this.values[0])) {
+                this.values.shift();
+                return true;
+            }
+            return false;
+        };
+        this.radio = (value) => {
+            if (this.hasSetRadioValue)
+                return false;
+            const result = this.bool(value);
+            if (result)
+                this.hasSetRadioValue = true;
+            return result;
+        };
+        this.str = () => { var _a; return String((_a = this.values.pop()) !== null && _a !== void 0 ? _a : ""); };
+        this.allValues = () => this.values;
+        this.warnIfLeftovers = (field) => {
+            if (this.values.length > 0) {
+                console.warn(`Could not determine how to use the value for the field ${field}. ` +
+                    `Leftover values were: ${this.values.join(", ")}.`);
+            }
+        };
+        const unknownValues = Array.isArray(values) ? values : [values];
+        this.values = unknownValues;
+    }
+}
+/**
+ * This subclass is order-permissive, meaning the user doesn't have to worry about
+ * the order in which the inputs occur in the DOM.
+ * This is useful for multiselects and checkbox groups and provides a better DX than
+ * the order-strict version.
+ */
+class PermissiveValues extends Values {
+    constructor() {
+        super(...arguments);
+        this.remove = (value) => {
+            const index = this.values.indexOf(value);
+            const deleted = this.values.splice(index, 1);
+            return deleted.length > 0;
+        };
+        this.bool = (value) => {
+            if ((0, getCheckboxChecked_1.getCheckboxChecked)(value, this.values)) {
+                this.remove(value) || this.remove(true);
+                return true;
+            }
+            return false;
+        };
+    }
+}
+const isMultiselect = (node) => node instanceof HTMLSelectElement && node.multiple;
+const isCheckbox = (node) => node instanceof HTMLInputElement && node.type === "checkbox";
+const isRadio = (node) => node instanceof HTMLInputElement && node.type === "radio";
+const setElementValue = (element, values, field) => {
+    if (isMultiselect(element)) {
         for (const option of element.options) {
-            option.selected = value.includes(option.value);
+            option.selected = values.bool(option.value);
         }
         return;
     }
-    if (element instanceof HTMLInputElement && element.type === "checkbox") {
-        const newChecked = (0, getCheckboxChecked_1.getCheckboxChecked)(element.value, value);
-        (0, tiny_invariant_1.default)(newChecked !== undefined, `Unable to determine if checkbox should be checked. Provided value was ${value} for checkbox ${name}.`);
-        element.checked = newChecked;
+    if (isCheckbox(element)) {
+        element.checked = values.bool(element.value);
         return;
     }
-    if (element instanceof HTMLInputElement && element.type === "radio") {
-        const newChecked = (0, getRadioChecked_1.getRadioChecked)(element.value, value);
-        (0, tiny_invariant_1.default)(newChecked !== undefined, `Unable to determine if radio should be checked. Provided value was ${value} for radio ${name}.`);
-        element.checked = newChecked;
+    if (isRadio(element)) {
+        element.checked = values.radio(element.value);
         return;
     }
-    (0, tiny_invariant_1.default)(typeof value === "string", `Invalid value for field "${name}" which is an ${element.constructor.name}. Expected string but received ${typeof value}`);
     const input = element;
-    input.value = value;
+    (0, tiny_invariant_1.default)(input.type !== "hidden", `Cannot set value on hidden input if it is not a controlled field. Field being updated was ${field}.`);
+    input.value = values.str();
+};
+const areElementsTheSameType = (nodes) => {
+    const getType = (node) => {
+        if (node instanceof HTMLInputElement)
+            return node.type;
+        if (node instanceof HTMLSelectElement)
+            return node.multiple ? "select" : "multiselect";
+        return null;
+    };
+    const firstElementInstance = nodes[0].constructor;
+    const firstElementType = getType(nodes[0]);
+    return nodes.every((element) => element.constructor === firstElementInstance &&
+        getType(element) === firstElementType);
 };
 const setInputValueInForm = (formElement, name, value) => {
     const controlElement = formElement.elements.namedItem(name);
     if (!controlElement)
         return;
     if (controlElement instanceof RadioNodeList) {
+        const values = areElementsTheSameType([...controlElement])
+            ? new PermissiveValues(value)
+            : new Values(value);
         for (const element of controlElement) {
-            setElementValue(element, value, name);
+            setElementValue(element, values, name);
         }
+        values.warnIfLeftovers(name);
     }
     else {
-        setElementValue(controlElement, value, name);
+        const values = new PermissiveValues(value);
+        setElementValue(controlElement, values, name);
+        values.warnIfLeftovers(name);
     }
 };
 exports.setInputValueInForm = setInputValueInForm;

package/build/internal/setFormValues.d.ts

@@ -0,0 +1,2 @@
+import { InternalFormId } from "./state/atomUtils";
+export declare const useSetFormValues: (formId: InternalFormId) => (arg: Record<string, unknown>) => Promise<void>;

package/build/internal/setFormValues.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetFormValues = void 0;
+const utils_1 = require("jotai/utils");
+const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const setInputValueInForm_1 = require("./logic/setInputValueInForm");
+const state_1 = require("./state");
+const controlledFields_1 = require("./state/controlledFields");
+const useSetFormValues = (formId) => (0, utils_1.useAtomCallback)((0, react_1.useCallback)(async (get, set, updatedValues) => {
+    const form = get((0, state_1.formElementAtom)(formId));
+    (0, tiny_invariant_1.default)(form, "Unable to access form element when setting field value. This is likely a bug in remix-validated-form.");
+    const controlledFields = get((0, controlledFields_1.controlledFieldsAtom)(formId));
+    const updatePromises = [];
+    for (const [field, value] of Object.entries(updatedValues)) {
+        const isControlled = !!controlledFields[field];
+        if (isControlled) {
+            updatePromises.push(set(controlledFields_1.setControlledFieldValueAtom, {
+                field,
+                formId,
+                value,
+            }));
+        }
+        else {
+            (0, setInputValueInForm_1.setInputValueInForm)(form, field, Array.isArray(value) ? value : [value]);
+        }
+    }
+    await Promise.all(updatePromises);
+}, [formId]), state_1.ATOM_SCOPE);
+exports.useSetFormValues = useSetFormValues;

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

@@ -0,0 +1,38 @@
+import { Atom } from "jotai";
+export declare type InternalFormId = string | symbol;
+export declare const formAtomFamily: <T>(data: T) => {
+    (param: InternalFormId): Atom<T> & {
+        write: (get: {
+            <Value>(atom: Atom<Value | Promise<Value>>): Value;
+            <Value_1>(atom: Atom<Promise<Value_1>>): Value_1;
+            <Value_2>(atom: Atom<Value_2>): Value_2 extends Promise<infer V> ? V : Value_2;
+        } & {
+            <Value_3>(atom: Atom<Value_3 | Promise<Value_3>>, options: {
+                unstable_promise: true;
+            }): Value_3 | Promise<Value_3>;
+            <Value_4>(atom: Atom<Promise<Value_4>>, options: {
+                unstable_promise: true;
+            }): Value_4 | Promise<Value_4>;
+            <Value_5>(atom: 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: T | ((prev: T) => T)) => void;
+        onMount?: (<S extends import("jotai/core/atom").SetAtom<T | ((prev: T) => T), void>>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: T;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};
+export declare type FieldAtomKey = {
+    formId: InternalFormId;
+    field: string;
+};
+export declare const fieldAtomFamily: <T extends Atom<unknown>>(func: (key: FieldAtomKey) => T) => {
+    (param: FieldAtomKey): T;
+    remove(param: FieldAtomKey): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: FieldAtomKey) => boolean) | null): void;
+};

package/build/internal/state/atomUtils.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldAtomFamily = exports.formAtomFamily = void 0;
+const jotai_1 = require("jotai");
+const utils_1 = require("jotai/utils");
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const formAtomFamily = (data) => (0, utils_1.atomFamily)((_) => (0, jotai_1.atom)(data));
+exports.formAtomFamily = formAtomFamily;
+const fieldAtomFamily = (func) => (0, utils_1.atomFamily)(func, isEqual_1.default);
+exports.fieldAtomFamily = fieldAtomFamily;

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

@@ -0,0 +1,66 @@
+import { PrimitiveAtom } from "jotai";
+import { InternalFormId } from "./atomUtils";
+export declare type ValueSerializer = (val: unknown) => string;
+export declare const controlledFieldsAtom: {
+    (param: InternalFormId): import("jotai").Atom<Record<string, PrimitiveAtom<unknown>>> & {
+        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: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void;
+        onMount?: (<S extends (update: Record<string, PrimitiveAtom<unknown>> | ((prev: Record<string, PrimitiveAtom<unknown>>) => Record<string, PrimitiveAtom<unknown>>)) => void>(setAtom: S) => void | (() => void)) | undefined;
+    } & {
+        init: Record<string, PrimitiveAtom<unknown>>;
+    };
+    remove(param: InternalFormId): void;
+    setShouldRemove(shouldRemove: ((createdAt: number, param: InternalFormId) => boolean) | null): void;
+};
+export declare const setControlledFieldValueAtom: 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: {
+        formId: InternalFormId;
+        field: string;
+        value: unknown;
+    }) => Promise<void>;
+    onMount?: (<S extends (update: {
+        formId: InternalFormId;
+        field: string;
+        value: unknown;
+    }) => Promise<void>>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: null;
+};
+export declare const useAllControlledFields: (formId: InternalFormId) => Record<string, PrimitiveAtom<unknown>>;
+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 useFieldSerializer: (formId: InternalFormId, field: string) => ValueSerializer;
+export declare const useRegisterFieldSerializer: (formId: InternalFormId, field: string, serializer?: ValueSerializer | undefined) => void;

package/build/internal/state/controlledFields.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRegisterFieldSerializer = exports.useFieldSerializer = exports.useControllableValue = exports.useControlledFieldValue = exports.useAllControlledFields = exports.setControlledFieldValueAtom = exports.controlledFieldsAtom = void 0;
+const jotai_1 = require("jotai");
+const omit_1 = __importDefault(require("lodash/omit"));
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const state_1 = require("../state");
+const atomUtils_1 = require("./atomUtils");
+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));
+const valueSerializerAtom = (0, atomUtils_1.fieldAtomFamily)(() => (0, jotai_1.atom)({ serializer: JSON.stringify }));
+const registerAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) => {
+    set(refCountAtom({ formId, field }), (prev) => prev + 1);
+    const newRefCount = get(refCountAtom({ formId, field }));
+    if (newRefCount === 1) {
+        set((0, exports.controlledFieldsAtom)(formId), (prev) => ({
+            ...prev,
+            [field]: fieldValueAtom({ formId, field }),
+        }));
+    }
+});
+const unregisterAtom = (0, jotai_1.atom)(null, (get, set, { formId, field }) => {
+    set(refCountAtom({ formId, field }), (prev) => prev - 1);
+    const newRefCount = get(refCountAtom({ 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.setControlledFieldValueAtom = (0, jotai_1.atom)(null, async (_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 useAllControlledFields = (formId) => (0, hooks_1.useFormAtomValue)((0, exports.controlledFieldsAtom)(formId));
+exports.useAllControlledFields = useAllControlledFields;
+const useControlledFieldValue = (formId, field) => {
+    const fieldAtom = fieldValueAtom({ 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 }));
+    (0, react_1.useEffect)(() => {
+        if (isHydrated && !isFieldHydrated) {
+            setValue({ formId, field, value: defaultValue });
+            setIsFieldHydrated(true);
+        }
+    }, [
+        defaultValue,
+        field,
+        formId,
+        isFieldHydrated,
+        isHydrated,
+        setIsFieldHydrated,
+        setValue,
+    ]);
+    return isFieldHydrated ? value : defaultValue;
+};
+exports.useControlledFieldValue = useControlledFieldValue;
+const useControllableValue = (formId, field) => {
+    const pending = (0, hooks_1.useFormAtomValue)(pendingValidateAtom({ formId, field }));
+    (0, react_1.useEffect)(() => {
+        pending === null || pending === void 0 ? void 0 : pending();
+    }, [pending]);
+    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]);
+    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);
+    return [value, setValue];
+};
+exports.useControllableValue = useControllableValue;
+const useFieldSerializer = (formId, field) => (0, hooks_1.useFormAtomValue)(valueSerializerAtom({ formId, field })).serializer;
+exports.useFieldSerializer = useFieldSerializer;
+const useRegisterFieldSerializer = (formId, field, serializer) => {
+    const setSerializer = (0, hooks_1.useFormUpdateAtom)(valueSerializerAtom({ formId, field }));
+    (0, react_1.useEffect)(() => {
+        if (serializer)
+            setSerializer({ serializer });
+    }, [serializer, setSerializer]);
+};
+exports.useRegisterFieldSerializer = useRegisterFieldSerializer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -33,13 +33,13 @@
     "validation"
   ],
   "peerDependencies": {
-    "@remix-run/react": "^1.0.6",
-    "@remix-run/server-runtime": "^1.0.6",
+    "@remix-run/react": ">1.x",
+    "@remix-run/server-runtime": ">1.x",
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@remix-run/react": "^1.0.6",
-    "@remix-run/server-runtime": "^1.0.6",
+    "@remix-run/react": "^1.2.1",
+    "@remix-run/server-runtime": "^1.2.1",
     "@types/lodash": "^4.14.178",
     "@types/react": "^17.0.37",
     "fetch-blob": "^3.1.3",

package/src/ValidatedForm.tsx

@@ -327,9 +327,9 @@ export function ValidatedForm<DataType>({
       }
     }
 
-    window.addEventListener("click", handleClick);
+    window.addEventListener("click", handleClick, { capture: true });
     return () => {
-      window.removeEventListener("click", handleClick);
+      window.removeEventListener("click", handleClick, { capture: true });
     };
   }, []);
 
@@ -354,12 +354,18 @@ export function ValidatedForm<DataType>({
         return;
       }
 
-      if (fetcher) fetcher.submit(clickedButtonRef.current || e.currentTarget);
+      // We deviate from the remix code here a bit because of our async submit.
+      // In remix's `FormImpl`, they use `event.currentTarget` to get the form,
+      // but we already have the form in `formRef.current` so we can just use that.
+      // If we use `event.currentTarget` here, it will break because `currentTarget`
+      // will have changed since the start of the submission.
+      if (fetcher) fetcher.submit(clickedButtonRef.current || formRef.current);
       else
-        submit(clickedButtonRef.current || e.currentTarget, {
+        submit(clickedButtonRef.current || formRef.current, {
           method,
           replace,
         });
+
       clickedButtonRef.current = null;
     }
   };