ConfirmPopup: Target not set properly after await/promise

[mnaeemshakir]

Describe the bug

Steps to reproduce are simple

1 - Copy an example from https://primevue.org/confirmpopup/
2 - Make an API call before showing/triggering confirm
3 - Confirm popup will be displayed on upper left corner of the screen.

Reproducer

https://stackblitz.com/edit/bycjcy-g8skn4?file=src%2FApp.vue

PrimeVue version

3.5

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[ichenhe]

May be the same problem: the popup is moved to the left-top corner if the stopPropagation is called. Even though stop the event after calling confirm.require().

[cmcnicholas]

Same issue.

Results in:

Removing the awaited code before show works.

[Rubikoid]

Looks like ConfirmPopup expecting prepogated click event from button to realign itself properly: https://github.com/primefaces/primevue/blob/master/packages/primevue/src/confirmpopup/ConfirmPopup.vue#L232

I'm came to totally cursed solution:

const popupRef = useTemplateRef("popup");
function show(event) {
    confirm.require({
        onShow: () => {
            setTimeout(() => {
                popupRef.value.alignOverlay()
            }, 0.1);
        }
    });
}

<ConfirmPopup ref="popup" />

setTimeout here required due to onShow calling happens before popupRef.container getting filled, so overwise it will crash.
I can't imagine any better solutions than 0.1 timeout.