Confirm Popup Through Custom Directive

[hcancelik]

Hi,

I'm seeking help to solve a positioning issue with a confirm popup.

I have this custom directive.

function reClick(el) {
  const newEvent = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  el.dispatchEvent(newEvent);
}

export default {
  beforeMount(el, binding) {
    let reDispatching = false;

    el.addEventListener(
      "click",
      (event) => {
        if (reDispatching) {
          return;
        }

        event.preventDefault();
        event.stopImmediatePropagation();

        const { appContext } = binding.instance.$;
        const confirm = appContext.config.globalProperties.$confirm;

        const { modifiers, value } = binding;

        let severity;
        let icon = "pi pi-question-circle";

        if (modifiers.destructive) {
          severity = "danger";
          icon = "pi pi-exclamation-triangle";
        }

        confirm.require({
          target: el, // Also tried without it
          header: "Confirm",
          message: "Are you sure you want to proceed?",
          group: "popover",
          icon,
          acceptProps: {
            label: "Confirm",
            severity,
          },
          rejectProps: {
            label: "Cancel",
            severity: "secondary",
            outlined: true,
          },
          reject: () => {},
          ...value,
          accept: () => {
            reDispatching = true;
            reClick(el);
            reDispatching = false;
          },
        });
      },
      { capture: true },
    );
  },
};

The problem is that the popover is always positioned at the top left of the document.

Can anyone guide me on how I would fix this?

Thanks.

Example: https://stackblitz.com/edit/primevue-4-vite-issue-template-oxg9ytnv
Click "Button" for the popover

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeVue Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.

[hcancelik]

@tugcekucukoglu here is a reproducable example of the issue

https://stackblitz.com/edit/primevue-4-vite-issue-template-oxg9ytnv