diff --git a/packages/core/src/getters.ts b/packages/core/src/getters.ts index c77ce06a..6e76ac50 100644 --- 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 index 8692bebe..fe7d5e0d 100644 --- 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; 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 index 748c2b45..5669f273 100644 --- 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 = ({ }, renderFormIdInput: () => { - const formId = getFormId(trackedState); + const formId = getFormIdOption(trackedState); if (!formId) return null; return ; }, diff --git a/packages/react/src/useForm.tsx b/packages/react/src/useForm.tsx index 5da1b342..7cec6e87 100644 --- 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>(() => { 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 index 722f6219..fa2e5de8 100644 --- a/packages/remix/src/useForm.tsx +++ b/packages/remix/src/useForm.tsx @@ -68,12 +68,9 @@ export function useForm( ): FormApi { let rvf: FormApi; - 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( rvf = useFormReact({ ...rvfOpts, ...serverStuff, - id: formId, + id: rvfOpts.id, otherFormProps: { method: rvfOpts.method, encType: rvfOpts.encType,