search

sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.62k stars 1.33k forks source link

Invalid dropdown position when append-to-body is true #1785

Open Eternal-Rise opened 11 months ago

Eternal-Rise commented 11 months ago

Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.

Describe the bug When we set the page height to 100vh/100% (which is a common behavior), the dropdown list will be rendered with incorrect positioning. This happens because the appearance of the dropdown list triggers the appearance of a scrollbar, so getBoundingClientRect will return the position of the select element taking the scrollbar into account. However, once the dropdown list appears in its designated position, there will be no scrollbar (and we won't even notice its appearance), causing the positioning to be incorrect.

Reproduction Link https://codepen.io/Eternal_Rise/pen/bGQLQQm

Steps To Reproduce

  1. Toggle select - renders correctly
  2. Second and all following toggle - renders incorrectly

Expected behavior Dropdown list should renders properly

Screenshots image

Possible solution Add extra class for dropdown list when append-to-body is true, and set default "top" to 0.

mylmz10 commented 5 months ago

same issue