I am trying to open the PrimeVue overlaypanel as normal using a button. However, since my app runs in the Shadow DOM, I use "append-to" and pass a DIV to mount the OVP in this DIV in the Shadow DOM (body does not work for the reasons mentioned).
But it looks like Primevue internally takes the top/left coordinates of the browser window (to calculate the absolute position) instead of those of the button with which I toggle the OVP. As a result, the overlay appears in a completely wrong position in the browser.
(this.overlayMountingDiv is set in the mounted hook)
<Button id="btn-op-toggle" @click="toggleOverlay" icon="pi pi-map-marker" />
<div id="overlay-mount-point"></div>
<OverlayPanel v-if="this.overlayMountingDiv !== null" :append-to="this.overlayMountingDiv" ref="locOverlay" @hide="overlayClosed">
<!-- Content -->
</OverlayPanel>
What I've tried:
I have already tried to override the top/left coordinates via PassThrough and javascript directly on the component, but internally they are always set incorrectly by Primevue.
I also tried to position the div overlay-mount-point relative, but that didn't help either (as I said, the coordinates don't seem to be calculated from the nearest relative parent object)
Also, I saw the second parameter of locOverlay.toggle(event, target). (Optional target if event.currentTarget should not be used.) But that didn't help me either.
tl;dr
Is there any way to influence the calculation of the coordinates used by the overlay panel, like a callback or something?