primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
8.69k stars 1.09k forks source link

OverlayPanel: open position bug #1579

Open NeluQi opened 2 years ago

NeluQi commented 2 years ago

Sometimes the OverlayPanel opens crookedly, either off-screen, or not near the clicked point.

Light codesandbox example https://codesandbox.io/embed/beautiful-engelbart-ss1q0?fontsize=14&hidenavigation=1&theme=dark

Try to place the button on all 4 sides and look at the behavior, in my project OverlayPanel often opens incorrectly and I have to scroll the page

image

image

image

NeluQi commented 2 years ago

P.S. The second screenshot is a way out of the bottom border of the browser

mertsincan commented 2 years ago

Hi @NeluQi,

Unfortunately, I still couldn't replicate this issue. What step do I need to follow to replicate it? Could you please update codesandbox link according to your case?

Thanks a lot!

NeluQi commented 2 years ago

Hi @NeluQi,

Unfortunately, I still couldn't replicate this issue. What step do I need to follow to replicate it? Could you please update codesandbox link according to your case?

Thanks a lot!

image

image

https://codesandbox.io/embed/mystifying-silence-2rdhw?fontsize=14&hidenavigation=1&theme=dark

I tried to reproduce it now and I'm not good at it

Now the problem occurs much less frequently. May have already been fixed in new versions.

I was able to reproduce strange behavior sometimes

Try it in different combinations with scrolling and dialogue in different parts of the screen

It seems that this is not particularly relevant now, the bug is very rare

mertsincan commented 2 years ago

Hi @NeluQi, Thanks a lot for the sample and detailed explanations! I'm pushing this issue to the next version for now. Looks like we need to run a lot of tests related to OverlayPanel.

Best Regards,

NeluQi commented 2 years ago

In my project, the panel arrow is shifted.

I spent a bunch of time doing this in a sandbox but could not reproduce

I found out that in my project, this only happens with the right panel opening

This is strange because the css is standard, I only replaced the colors

This panel doesn't look its best on mobile.

BUG: image

GOOD: image

martinszeltins commented 1 year ago

This is still an issue, I was able to reproduce the bug on PrimeVue docs themselves:

https://user-images.githubusercontent.com/34019878/223940310-314393dc-7dcc-499f-a6ec-d1d3043443f6.mp4

JediPixels commented 1 month ago

Still an issue with my app too... It looks like if the button calling is located towards the right side of the page and with width of the Popover is fairly large, the Point Arror portion is to the left side of the Popover, but it should be on the right side under the calling button.