Vuepic / vue-datepicker

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

Datepicker jumps due to updating the `style` attribute of the `.dp--menu-wrapper` element #947

Closed danulqua closed 1 month ago

danulqua commented 1 month ago

Describe the bug After closing the issue #940 , the issue with the date picker jumps on value update wasn't solved. After deeper investigation, I found that on value change the style attribute of the .dp--menu-wrapper element is being updated, exactly the inset value.

To Reproduce Steps to reproduce the behavior:

  1. Open date picker
  2. Open dev tools and inspect the .dp--menu-wrapper element
  3. Type something in the input or select any value
  4. See that style inset was updated

Expected behavior Nothing is being updated.

Actual behavior inset value of the style attribute is being updated, and because of that, date picker changes its position. If I want date picker to be repositioned, there is a dedicated prop recalculate-position which I want to use and rely on.

Screenshots https://github.com/user-attachments/assets/19408654-1f4f-4fc2-9a7d-4c2e8eb4cfa8

Desktop & mobile (please complete the following information):

Jasenkoo commented 1 month ago

This inset property is not coming from the picker, I believe you are using a custom positioning function. Another thing is that your table may be re-rendering when you type text, in any case, this is not a date picker issue.

I played with various positioning and the result was always the same, you can see here that even recalculate-positon is not being called as expected