search

primefaces / primevue

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

Dropdown: Overlay panel hover causes browser horiz scrollbar to scroll #5613

Open craiggeil opened 6 months ago

craiggeil commented 6 months ago

Describe the bug

Put a dropdown component in a div that causes the browser's horizontal scrollbar to show up. Make sure the dropdown is not on the left edge of the browser. Click the dropdown, now move the mouse to hover over the overlay panel showing the options. The horiz scrollbar scrolls to the right so that the left edge of the panel is flush with the left side of the screen.

Reproducer

https://stackblitz.com/edit/crrcbb?file=src%2FApp.vue

PrimeVue version

3.50.0

Vue version

3.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

  1. Create div 2000 px wide
  2. Add dropdown component inside it, give it a width of 200px and margin-left of 200px
  3. Click dropdown to show options
  4. Hover over options
  5. Horizontal scrollbar in browser auto scrolls to the right so that the options panel is aligned on the left edge of the screen

Expected behavior

For the horizontal scroll bar to not move

craiggeil commented 2 months ago

This is also happening in v4.05. I'm about to give up on this library. The only components I'm using are ones that are using the overlay and they all don't work because of this bug. I've already written my own dropdown component. Now I'm running into the same issue with the autocomplete and datepicker components. Sucks.