Use Shadcn dialog and form together, but submit from dialog not form.

[step2341]

I've been having trouble attempting to use the Shadcn react-hook form wrapper with a dialog hook. the behavior im trying to implement is to trigger the onSubmit (or any action, such as passing data back to the parent component) from the button in the dialog.

ive found a couple of articles like this, but none of these approaches seem to work.
https://bdaneesha.medium.com/react-submit-form-using-button-in-parent-component-ii-d58c43abcfc8

any ideas?

[pablotanner]

Why can't you just add onClick={onSubmit} to the button in the dialog? Like you could do form.trigger() to trigger/check for errors, then if there aren't any errors you do onSubmit.

onClick={() => {
     form.trigger()
    if (form.formState.isValid) onSubmit()
}}

[GatienFrenchDev]

Yes but form.trigger is an asynchronous method (see react-hook-form doc), so you need to add a await and async declaration.

onClick={async () => {
    await form.trigger();  // Manually triggers form or input validation
    if (form.formState.isValid) onSubmit(); // Call the `onSubmit` function if the form is validated
}}

[GustavoOS]

Shadcn has a bug, if you add an AlertDialog inside a form, the action does not propagate submit