Currently, I have integrated a Radix UI's Alert Dialog in my Next.js 13 app to confirm the deletion of a contact from the user's contact list:
Take a look at the Alert Dialog modal here
However, there seems to be an issue with the delete button (the red 'Yes' button) not triggering the onSubmit handler of the form. Upon clicking it, the modal closes without deleting the contact.
The delete button is connected to a remote form through the form attribute:
const DeleteButton = React.forwardRef((props, ref) => {
return (
<button ref={ref} type="submit" form="edit-form" {...props}>
Yes, delete
</button>
);
});
This is how the form is structured:
<form id='edit-form' onSubmit={formSubmitHandler}>
...form content goes here...
</form>
Below is the structure for the Alert Dialog:
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>
);
}
I have tried using forwarding refs, forwarding props, and utilizing the asChild prop following the composition section in the documentation but haven't been successful so far.
Unfortunately, the delete button within the Alert Dialog still doesn't trigger the form submission.
If you have any further information or guidance on this matter, please do let me know. Thank you in advance for your assistance.