Title rewritten to: PrimeVue ConfirmDialog Multiple Instances Issue

Question

I have a component from PrimeVue and it works fine except it opens multiple times when activated; for reference, I do that multiple times throughout the process Components, some confirmation dialogs only open once, most usually open twice. When the dialog is accepted or rejected, they all close immediately, however, when pressing the "X" in the upper right corner of the dialog, it only closes one instance at a time, showing multiple dialogs open.

What I tried: Use key

<ConfirmDialog key="myDialog" />

...

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

thanks for your help.

Answer 1

I encountered this problem and I found that it was caused by declaring multiple ConfirmDialog components in the DOM markup. For example, if you add a confirmation dialog to every component that uses it, and you happen to have more than 2 components loading on the page at the same time, you will see 1 for each The dialog box exists on this page.

The solution is to declare ConfirmDialog only once in the root Vue component, and then each time it is called, just import the useConfirm function and then use that function to call the dialog.

For example:

Application View

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

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

    <ConfirmDialog />
</template>

All other components:

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