search

Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.43k stars 142 forks source link

Auto-positioning when using ShadowDOM and slotted content #828

Closed biesbjerg closed 4 months ago

biesbjerg commented 4 months ago

Describe the bug I am encountering an issue with automatic positioning of the datepicker when it's used within a ShadowDOM slot via a web component. The function getScrollableParent returns Window, even though the picker is within a scrolling container element, which results in the scroll event listener being attached to the incorrect element. Consequently, the datepicker does not reposition itself when the actual container element is scrolled.

This issue can be resolved by modifying getScrollableParent to check if the element is assigned to a slot and, if so, to use the slot's parent element instead.

To Reproduce

  1. Go to https://stackblitz.com/edit/ionic-vue-v7-pd4fmn?file=src%2Fviews%2FHomePage.vue
  2. Click to open a datepicker
  3. Try to scroll it out of view.

Expected behavior The datepicker should adjust its position in response to scrolling of the containing element.

PR: #829