How to submit a form with a button outside of the form's DOM structure using Radix UI's Alert Dialog

[pytest3]

Hello there,

Im using Radix UI's Alert Dialog to ask users to confirm that they want to delete a contact

However clicking the red delete button doesnt trigger the edit-form's formSubmitHandler to run. This delete button is outside the edit-form's DOM structure so I've wired it up to the form using the form attribute.

The delete button is set up as such:

const DeleteButton = React.forwardRef((props, ref) => {
  return (
    <button ref={ref} type="submit" form="edit-form" {...props}>
      Yes, delete
    </button>
  );
});

The edit-form is set up as such:

<form id='edit-form' onSubmit={formSubmitHandler}>
 ...form contents here...
</form>

The Alert Dialog is set up as such:

export default function Modal2({
  title,
  description,
  children, 
}) {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger asChild>
        {children}
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay className={styles.overlay} />
        <AlertDialog.Content className={styles.content}>
          <AlertDialog.Title className={styles.title}>
            {title}
          </AlertDialog.Title>
          <AlertDialog.Description className={styles.description}>
            {description}
          </AlertDialog.Description>
          <div className={styles.actions}>
            <AlertDialog.Cancel className={`${styles.button} ${styles.cancel}`}>
              Cancel
            </AlertDialog.Cancel>
            <AlertDialog.Action
              className={`${styles.button} ${styles.action}`}
              asChild
            >
              <DeleteButton></DeleteButton>
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

Please help as i've been stuck on this for quite some time. Thank you so much in advance!!

[benoitgrelard]

It's because AlertDialog.Action closes the dialog on click. Normally we would recommend to prevent the library's default behaviour in such cases by calling event.preventDefault in onClick but unfortunately here it would also prevent submission.

So in this case, your best bet would be to not use AlertDialog.Action but use your button straight away instead.