Popover: Popover position is not relatively calculated when using append-to=self. This causes aligment problems in a fixed element.

[michael-stubenvoll-heller]

Describe the bug

When using Popover in a fixed element and setting append-to=self, the position of the Popover is calculated absolutely. This causes the Popover to appear in the wrong place. (See the reproducer) I think the solution to this problem is quite simple if you look at how this problem was solved in the Select Component:

   //Select.vue
   alignOverlay() {
            if (this.appendTo === 'self') {
                relativePosition(this.overlay, this.$el);
            } else {
                this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
                absolutePosition(this.overlay, this.$el);
            }
        },

Here, the relative position is used to determine the position of the overlay when using appendTo=self, which results in correct positioning.

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-gak546?file=src%2FApp.vue

PrimeVue version

4.1.0

Vue version

4.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

Create a fixed div element and put a Popover Component inside. Set append-to="self". Add enough content outside of the fixed element to allow for scrolling.

Expected behavior

The Popover should appear next to the target.

[arthaud-proust]

Hi, concerned by this issue too
It would be very helpful to append Popover to target element rather than on body

[adholland]

also interested in the resolution to this issue