PrimeVue ConfirmDialog Opens Multiple Times

I have a <ConfirmDialog> component from PrimeVue that works as it should, except for the fact that it opens multiple times when activated; for reference, I do the component multiple times throughout, some of the ConfirmDialogs only open once, most of them open twice usually. When accepting or rejecting the dialog, they all close instantly, however, when pressing ‘X’ at the top right of the Dialog, it only closes one instance at a time, showing that multiple Dialogs have opened.

What I’ve tried: Using a key

<ConfirmDialog key="myDialog" />

...

const confirmer = (
 message,
 header,
 icon,
 ) => {
confirm.require({
 accept: () => { confirm.close()},
 reject: () => { confirm.close()},
 key: 'myDialog'
})}

Thanks for the assistance.

Answer

I had this problem and I discovered that it’s caused by declaring multiple ConfirmDialog components in DOM markup. For example if you add a confirm dialog to every component that uses it and then you happen to load 2+ components on the page at the same time, you will see 1 dialog for every <ConfirmDialog /> that exists on that page.

The solution is to only declare the ConfirmDialog once in your root Vue component and then every time you call it, only import the useConfirm function and then call the dialog with that.

For example:

App.vue

<script setup>
import ConfirmDialog from 'primevue/confirmdialog';
</script>

<template>
    <router-view></router-view>

    <ConfirmDialog />
</template>

Every other component:

<script setup>
import { useConfirm } from 'primevue/useconfirm';

const confirm = useConfirm();

const handleRemoveThing = () => {
    // bye
};

const onRemoveThing = () => {
    confirm.require({
        message: 'Are you sure you want to remove some thing?',
        header: 'Remove Thing',
        icon: 'icon-delete',
        rejectLabel: 'Cancel',
        acceptLabel: 'Remove',
        acceptClass: 'p-button-danger',
        accept: handleRemoveThing,
    });
};
</script>

<template>
    <div>
        <button @click="onRemoveThing">Remove</button>
    </div>
</template>