vue-flatpickr-component icon indicating copy to clipboard operation
vue-flatpickr-component copied to clipboard

Scroll Issue while using `flat-pickr`in `VDialog`

Open yagnikvamja opened this issue 5 months ago • 5 comments

There is an issue with the flat-pickr component when used within a VDialog. If the dialog is opened without scrolling the page, the date picker functions correctly. However, if the page is scrolled before reopening the dialog, the position of the flat-pickr shifts, causing it to display incorrectly.

Tell about your platform

  • flatPickr version : 4.6.x
  • Vue.js version : ^3.4.38
  • Browser name and version : Chrome version 128.0.6613.85
  • This package version : ^11

Current behavior

  • Open this link: https://stackblitz.com/edit/vitejs-vite-9ukhzc?file=src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue,index.html,package.json&terminal=dev
  • Click the "OPEN DIALOG" button.
  • Click on the "Enter Date" input and observe the position of the date picker.
  • Scroll the page slightly upward.
  • Click the "OPEN DIALOG" button again.
  • Click on the "Enter Date" input and notice how the date picker position shifts as the page scrolls up.

Expected behavior

The date picker position should align correctly with the input field, regardless of the page scroll.

Minimal reproduction of the problem with instructions A minimal reproduction of the issue is provided in the attached link: https://stackblitz.com/edit/vitejs-vite-9ukhzc?file=src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue,index.html,package.json&terminal=dev

yagnikvamja avatar Aug 30 '24 08:08 yagnikvamja