remix-validated-form 4.1.9 → 4.3.1-beta.0

package/src/internal/getInputProps.test.ts

@@ -0,0 +1,251 @@
+import { describe, it, expect, vi } from "vitest";
+import {
+  createGetInputProps,
+  CreateGetInputPropsOptions,
+} from "./getInputProps";
+
+const fakeEvent = { fake: "event" } as any;
+
+describe("getInputProps", () => {
+  describe("initial", () => {
+    it("should validate on blur by default", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: false,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).not.toBeCalled();
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+
+    it("should respect provided validation behavior", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: false,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+        validationBehavior: {
+          initial: "onChange",
+        },
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).toBeCalledTimes(1);
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+
+    it("should not validate when behavior is onSubmit", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: false,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+        validationBehavior: {
+          initial: "onSubmit",
+        },
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).not.toBeCalled();
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).not.toBeCalled();
+    });
+  });
+
+  describe("whenTouched", () => {
+    it("should validate on change by default", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: true,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).toBeCalledTimes(1);
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+
+    it("should respect provided validation behavior", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: true,
+        hasBeenSubmitted: false,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+        validationBehavior: {
+          whenTouched: "onBlur",
+        },
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).not.toBeCalled();
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+  });
+
+  describe("whenSubmitted", () => {
+    it("should validate on change by default", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: true,
+        hasBeenSubmitted: true,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).toBeCalledTimes(1);
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+
+    it("should respect provided validation behavior", () => {
+      const options: CreateGetInputPropsOptions = {
+        name: "some-field",
+        defaultValue: "test default value",
+        touched: true,
+        hasBeenSubmitted: true,
+        setTouched: vi.fn(),
+        clearError: vi.fn(),
+        validate: vi.fn(),
+        validationBehavior: {
+          whenSubmitted: "onBlur",
+        },
+      };
+      const getInputProps = createGetInputProps(options);
+
+      const provided = {
+        onBlur: vi.fn(),
+        onChange: vi.fn(),
+      };
+      const { onChange, onBlur } = getInputProps(provided);
+
+      onChange!(fakeEvent);
+      expect(provided.onChange).toBeCalledTimes(1);
+      expect(provided.onChange).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).not.toBeCalled();
+      expect(options.validate).not.toBeCalled();
+
+      onBlur!(fakeEvent);
+      expect(provided.onBlur).toBeCalledTimes(1);
+      expect(provided.onBlur).toBeCalledWith(fakeEvent);
+      expect(options.setTouched).toBeCalledTimes(1);
+      expect(options.setTouched).toBeCalledWith(true);
+      expect(options.validate).toBeCalledTimes(1);
+    });
+  });
+});

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/logic/getRadioChecked.ts

@@ -5,3 +5,14 @@ export const getRadioChecked = (
   if (typeof newValue === "string") return newValue === radioValue;
   return undefined;
 };
+
+if (import.meta.vitest) {
+  const { it, expect } = import.meta.vitest;
+  it("add", () => {
+    expect(getRadioChecked("on", "on")).toBe(true);
+    expect(getRadioChecked("on", undefined)).toBe(undefined);
+    expect(getRadioChecked("trueValue", undefined)).toBe(undefined);
+    expect(getRadioChecked("trueValue", "bob")).toBe(false);
+    expect(getRadioChecked("trueValue", "trueValue")).toBe(true);
+  });
+}

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);

package/src/server.ts

@@ -24,7 +24,8 @@ import {
  */
 export function validationError(
   error: ValidatorError,
-  repopulateFields?: unknown
+  repopulateFields?: unknown,
+  init?: ResponseInit
 ): Response {
   return json<ValidationErrorResponseData>(
     {
@@ -33,7 +34,7 @@ export function validationError(
       repopulateFields,
       formId: error.formId,
     },
-    { status: 422 }
+    { status: 422, ...init }
   );
 }