Popover - Misplaced arrow

[Synar]

Describe the bug

The arrow of the popover is incorrectly placed, off to the left of the target element.

This issue is also present in primevue's very own website, in the documentation of the v4 version of popover (the issue was absent in v3), making it easy to reproduce. I got it both on my pixel's chrome and on firefox on my desktop.

Reproducer

https://primevue.org/popover/

PrimeVue version

4

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

Go to https://primevue.org/popover/, click on any of the example buttons triggering a popover to be displayed

Expected behavior

Arrow aligns itself to the target

[multun]

I can reproduce this behavior with the ConfirmationPopup as well, on wider screens, even in the documentation example, by aligning buttons to the right of the screen:

[multun]

This is a regression from Primevue 3.52, where the same example works fine:

[blouflashdb]

I have the same problem.

[multun]

@blouflashdb can you please confirm this change fixes the issue?

[blouflashdb]

@blouflashdb can you please confirm this change fixes the issue?

how can I test your PR?

[multun]

@blouflashdb

If you're OK with using a build I made

In your package.json, remove previous references to primevue, and add the following:

    "@primevue/auto-import-resolver": "https://dl.multun.net/primeview-pr-5934/primevue-auto-import-resolver-4.0.0-rc.2.tgz",
    "@primevue/core": "https://dl.multun.net/primeview-pr-5934/primevue-core-4.0.0-rc.2.tgz",
    "@primevue/icons": "https://dl.multun.net/primeview-pr-5934/primevue-icons-4.0.0-rc.2.tgz",
    "@primevue/metadata": "https://dl.multun.net/primeview-pr-5934/primevue-metadata-4.0.0-rc.2.tgz",
    "@primevue/nuxt-module": "https://dl.multun.net/primeview-pr-5934/primevue-nuxt-module-4.0.0-rc.2.tgz",
    "@primevue/themes": "https://dl.multun.net/primeview-pr-5934/primevue-themes-4.0.0-rc.2.tgz",
    "primevue": "https://dl.multun.net/primeview-pr-5934/primevue-4.0.0-rc.2.tgz",

If you're not OK with using a build I made

I'm not aware of the less cursed ways of doing this. If anyone is aware of a better way to do this, please point it out.

1) Clone my fork and checkout my branch git clone -b fix-popup-arrow-offset git@github.com:multun/primevue.git primevue-pr 2) Build and pack all packages in the primevue workspace:

cd primevue-pr
mkdir dist
dist_dir="$(realpath dist)"
for package in packages/*; do pushd "$package"; pnpm pack --pack-destination "$dist_dir"; popd; done

3) get the path to each package .tgz dist, and use file: references to install these in your project

    "@primevue/auto-import-resolver": "file:/PATH_TO_DIST/primevue-auto-import-resolver-4.0.0-rc.2.tgz",
    "@primevue/core": "file:/PATH_TO_DIST/primevue-core-4.0.0-rc.2.tgz",
    "@primevue/icons": "file:/PATH_TO_DIST/primevue-icons-4.0.0-rc.2.tgz",
    "@primevue/metadata": "file:/PATH_TO_DIST/primevue-metadata-4.0.0-rc.2.tgz",
    "@primevue/nuxt-module": "file:/PATH_TO_DIST/primevue-nuxt-module-4.0.0-rc.2.tgz",
    "@primevue/themes": "file:/PATH_TO_DIST/primevue-themes-4.0.0-rc.2.tgz",
    "primevue": "file:/PATH_TO_DIST/primevue-4.0.0-rc.2.tgz",

[jeverduzco]

I have the same issue with V4.