diff --git a/packages/design/src/Form/Form.tsx b/packages/design/src/Form/Form.tsx index a5ddb89b..8716a7e8 100644 --- a/packages/design/src/Form/Form.tsx +++ b/packages/design/src/Form/Form.tsx @@ -78,6 +78,16 @@ export default function Form({ const formMethods = useForm>({}); + // Reset React Hook Form when route changes (e.g., page navigation in FormPreview) + // This prevents field values from bleeding across pages + // Only reset when we have an onSubmit handler (FormPreview mode), not in FormEdit mode + const hasOnSubmit = !!onSubmit; + useEffect(() => { + if (isPreview && hasOnSubmit) { + formMethods.reset({}); + } + }, [session.route?.params.page, isPreview, hasOnSubmit]); + return (
@@ -114,6 +124,19 @@ export default function Form({ > + ) : onSubmit ? ( +
{ + event?.preventDefault(); + onSubmit(data); + })} + method="POST" + aria-label={session.form.summary.title || 'Form'} + > + + ) : (
@@ -134,10 +157,8 @@ const FormContents = ({ prompt: Prompt; }) => { return ( - <> -
- {renderPromptComponents(context, prompt.components)} -
- +
+ {renderPromptComponents(context, prompt.components)} +
); }; diff --git a/packages/design/src/FormManager/FormPreview/FormPreview.tsx b/packages/design/src/FormManager/FormPreview/FormPreview.tsx index 94c3835b..dd840805 100644 --- a/packages/design/src/FormManager/FormPreview/FormPreview.tsx +++ b/packages/design/src/FormManager/FormPreview/FormPreview.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; -import { mergeSession } from '@flexion/forms-core'; +import { applyPromptResponse, mergeSession } from '@flexion/forms-core'; import Form from '../../Form/Form.js'; import { useRouteParams } from '../hooks.js'; @@ -12,7 +13,8 @@ export const FormPreview = () => { setSession: state.setSession, })); const session = useFormManagerStore(state => state.session); - const { routeParams } = useRouteParams(); + const { routeParams, pathname } = useRouteParams(); + const navigate = useNavigate(); useEffect(() => { if (routeParams.page !== session.route?.params.page) { @@ -27,5 +29,37 @@ export const FormPreview = () => { } }, [routeParams.page]); - return
; + const handleSubmit = (data: Record) => { + // Validate and update session with form data + const result = applyPromptResponse(context.config, session, { + action: 'submit', + data, + }); + + if (!result.success) { + console.warn('Error applying prompt response in preview...', result.error); + return; + } + + // Update session with validated data + setSession(result.data); + + // Navigate to next page + const currentPage = Number(routeParams.page) || 0; + const nextPage = currentPage + 1; + const newParams = new URLSearchParams({ + ...routeParams, + page: nextPage.toString(), + }); + navigate(`${pathname}?${newParams.toString()}`); + }; + + return ( + + ); };