[v1] What's the equivalent for requestIntent(form, { value: 'submit' })

[antoinechalifour]

Hi everyone ! Congrats on the release, I like the new APIs !

I was in the process of migrating, but got stuck migrating code using requestIntent(form, { value: 'submit' }). My forms use some kind of "autosave" and this function is called whevener changes are made, to run all validation and submit the form.

Has this feature been removed ? Or has it been replaced by something else ?

Thanks !

[edmundhung]

In v1, we internalize the conform intent to avoid ambiguity with normal intent buttons. What you need can be a submit button with your preferred name like intent and handled like this:

const schema = z.object({
    intent: z.enum(['submit', 'or', 'anything']),
    // ...
});

export async function action({ request }) {
    const formData = await request.formData();
    const submission = parseWithZod(formData, { schema });

    if (submission.status !== 'success') {
        return submission.reply();
    }

    switch (submission.value.intent) {
        case 'submit':
            // ...
            break;
        case 'or':
            // ...
            break;
        case 'anything':
            // ...
            break;
    }

    // ....
}

export default function Example() {
    const [form, fields] = useForm();
    const submitButtonRef = useRef<HTMLButtonElement>(null);

    return (
      <Form
        onChange={() => {
            // Click on the submit button to trigger save
            submitButtonRef.current?.click();
        }}
      >
         <button name="intent" value="submit" ref={submitButtonRef}>Save</button>
      </Form>
    );
}

[antoinechalifour]

Thank you for your answer ! In the meantime I came up with form.requestSubmit() (which accepts a submitter as an argument). It seems to work for my use case. Do you see any downside of this approach ?

[edmundhung]

That's also what Conform is using internally if the API is available. The only downside of form.requestSubmit() is slightly lower percentage (~93%) in terms of browser support comparing to element.click() (~97%).

[antoinechalifour]

Thanks a lot for your anwsers, migration is almost done ;)