Calendar position error when appendTo: 'self' is set

[Traveller23]

Describe the bug

When appendTo: 'self' is set for the PrimeReactProvider, the position of the datepicker that appears after clicking on the Calendar is drastically shifted:

This is probably because position: absolute was used instead of position: fixed, see the screenshot above.

The style of the calendar's container: width: 20rem; margin: 1rem auto;, very simple.

Reproducer

https://github.com/Traveller23/primereact-nextjs-13

PrimeReact version

10.0.2

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

@Traveller23 interested in submitting a PR?

[melloware]

Here is a StackBlitz showing the issue: https://stackblitz.com/edit/react-bzipqg?file=src%2Findex.js

[melloware]

Actually you are right if I put appendTo="self" right on the Calendar component it works fine. Its only if its set globally with the PrimeReactProvider the positioning is incorrect.

[Traveller23]

@melloware I tried adding .p-datepicker {position: fixed !important;}, after the first click on the input control, it displays fine, but on the second click the date-picker simply disappears. So I think there may be other issues.

[melloware]

Yep something else is definitely going on here.

[melloware]

I would like to retest this when 10.1.0 is released