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

[yagnikvamja]

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

[ankurk91]

i could not replicate it, can u send a screen recording? Did you try to search for similar issues https://github.com/flatpickr/flatpickr/issues

[yagnikvamja]

Hello @ankurk91,

To help you better understand and reproduce the issue, I’ve created a minimal example for reference. You can access it via the following link: StackBlitz Reproduction.

Additionally, here is a screen recording of the issue: Screen Recording.

I found a similar issue with Flatpickr as well: https://github.com/flatpickr/flatpickr/issues/1160

[ankurk91]

I was able to see the issue in recording, and i can see someone has commented the solution.

Have you tried using static: true in options?

[ankurk91]

Closing due to no activity

[yagnikvamja]

Hello @ankurk91,

Apologies for the delayed response.

I attempted to pass static: true in the config, but it didn't work as expected. Since my dialog size is small, clicking on the date picker causes a scrollbar to appear, which negatively impacts the user experience.

Could you please guide me on how to achieve a smooth and proper opening of the dialog?

Reproduction link: https://stackblitz.com/edit/vitejs-vite-d2p3io?file=package.json

Additionally, here is a recording for reference: Vimeo link.

Thank you!

[AntonLugtenburg]

@yagnikvamja I'm struggling with the same issue, have you found a solution yet ?

[ankurk91]

Most likely it is not the issue with this vue library.

Please report this to parent repo

[AntonLugtenburg]

Thank you for replying. I found a solution for the issue

https://github.com/flatpickr/flatpickr/issues/2533

[yagnikvamja]

Hello @AntonLugtenburg ,

Thanks for your help. 😄