I have a <ConfirmDialog> ponent from PrimeVue that works as it should, except for the fact that it opens multiple times when activated; for reference, I do the ponent 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.

I have a <ConfirmDialog> ponent from PrimeVue that works as it should, except for the fact that it opens multiple times when activated; for reference, I do the ponent 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.

• javascript
• vue.js
• ponents
• primevue

1 Answer 1

I had this problem and I discovered that it's caused by declaring multiple ConfirmDialog ponents in DOM markup. For example if you add a confirm dialog to every ponent that uses it and then you happen to load 2+ ponents 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 ponent 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 ponent:

<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>