fix: correctly handle having a default form id but only sending it to…

… the server when it isn't the default
airjp73 · Nov 12, 2024 · da073db · da073db
1 parent 2a8c7ce
commit da073db
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 19 deletions.
diff --git a/packages/core/src/getters.ts b/packages/core/src/getters.ts
@@ -41,8 +41,14 @@ export const getAllErrors = (state: FormStoreValue) => {
   return Object.fromEntries(fieldsWithErrors);
 };
 
-export const getFormId = (state: FormStoreValue) => state.formProps.id;
+export const getFormId = (state: FormStoreValue) =>
+  state.formProps.id ?? state.defaultFormId;
 
-export const getFormProps = (state: FormStoreValue) => state.formProps;
+export const getFormIdOption = (state: FormStoreValue) => state.formProps.id;
+
+export const getFormProps = (state: FormStoreValue) => ({
+  ...state.formProps,
+  id: state.formProps.id ?? state.defaultFormId,
+});
 
 export const getFormAction = (state: FormStoreValue) => state.formProps.action;
diff --git a/packages/core/src/store.ts b/packages/core/src/store.ts
@@ -25,7 +25,6 @@ import { GenericObject, preprocessFormData } from "./native-form-data/flatten";
 import { MultiValueMap } from "./native-form-data/MultiValueMap";
 import { insert, move, remove, replace, toSwapped } from "./arrayUtil";
 import { getFieldDefaultValue, getFieldValue } from "./getters";
-import { F } from "vitest/dist/reporters-yx5ZTtEV";
 
 export type FieldSerializer = (value: unknown) => string;
 
@@ -152,7 +151,7 @@ export type ResolverQueue = ReturnType<typeof createResolverQueue>;
 
 export type StoreFormProps = {
   action?: string;
-  id: string;
+  id?: string;
 };
 
 export type StoreFlags = {
@@ -175,6 +174,7 @@ type StoreState = {
   submitSource: "state" | "dom";
   formProps: StoreFormProps;
   flags: StoreFlags;
+  defaultFormId: string;
 };
 
 export type SubmitterOptions = {
@@ -455,7 +455,11 @@ export const createFormStateStore = ({
       arrayUpdateKeys: {},
       validationBehaviorConfig,
       submitSource,
-      formProps,
+      formProps: {
+        ...formProps,
+        id: formProps.id,
+      },
+      defaultFormId: genKey(),
       flags,
 
       /////// Validation
@@ -862,7 +866,10 @@ export const createFormStateStore = ({
         set((state) => {
           state.submitSource = submitSource;
           state.validationBehaviorConfig = validationBehaviorConfig;
-          state.formProps = formProps;
+          state.formProps = {
+            ...formProps,
+            id: formProps.id ?? state.formProps.id,
+          };
           state.flags = flags;
         });
       },

diff --git a/packages/react/src/base.tsx b/packages/react/src/base.tsx
@@ -18,6 +18,7 @@ import {
   getFormProps,
   SubmitterOptions,
   FORM_ID_FIELD_NAME,
+  getFormIdOption,
 } from "@rvf/core";
 import {
   StringToPathTuple,
@@ -685,7 +686,7 @@ export const makeBaseFormApi = <FormInputData,>({
     },
 
     renderFormIdInput: () => {
-      const formId = getFormId(trackedState);
+      const formId = getFormIdOption(trackedState);
       if (!formId) return null;
       return <input type="hidden" name={FORM_ID_FIELD_NAME} value={formId} />;
     },

diff --git a/packages/react/src/useForm.tsx b/packages/react/src/useForm.tsx
@@ -172,11 +172,9 @@ export function useForm<
     otherFormProps,
     reloadDocument,
     validationBehaviorConfig,
-    id: providedFormId,
+    id,
   } = options;
 
-  const defaultFormId = useId();
-
   const [form] = useState<FormScope<unknown>>(() => {
     const rvf = createFormScope({
       defaultValues: options.defaultValues ?? {},
@@ -198,7 +196,7 @@ export function useForm<
       submitSource: submitSource ?? "dom",
       formProps: {
         action,
-        id: providedFormId ?? defaultFormId,
+        id,
         ...otherFormProps,
       },
       flags: {
@@ -260,7 +258,7 @@ export function useForm<
           : undefined,
       formProps: {
         action,
-        id: providedFormId ?? defaultFormId,
+        id,
         ...otherFormProps,
       },
       flags: {
@@ -275,8 +273,7 @@ export function useForm<
     whenSubmitted,
     whenTouched,
     action,
-    providedFormId,
-    defaultFormId,
+    id,
     disableFocusOnError,
     otherFormProps,
     reloadDocument,

diff --git a/packages/remix/src/useForm.tsx b/packages/remix/src/useForm.tsx
@@ -68,12 +68,9 @@ export function useForm<FormInputData extends FieldValues, FormOutputData>(
 ): FormApi<FormInputData> {
   let rvf: FormApi<FormInputData>;
 
-  const defaultId = useId();
-  const formId = rvfOpts.id ?? defaultId;
-
   const { fetcher, submitSource = "dom" } = rvfOpts;
   const serverStuff = useServerValidationErrors({
-    formId,
+    formId: rvfOpts.id,
     defaultValues: rvfOpts.defaultValues as any,
     fetcher: rvfOpts.fetcher,
   });
@@ -152,7 +149,7 @@ export function useForm<FormInputData extends FieldValues, FormOutputData>(
   rvf = useFormReact<FormInputData, FormOutputData, void>({
     ...rvfOpts,
     ...serverStuff,
-    id: formId,
+    id: rvfOpts.id,
     otherFormProps: {
       method: rvfOpts.method,
       encType: rvfOpts.encType,