search

Vuepic / vue-datepicker

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

Date picker jumps when user manually types inside the input #940

Closed danulqua closed 1 month ago

danulqua commented 1 month ago

Describe the bug After updating from 8.2.0 to 8.8.1, the date picker in our project started changing its position in a strange way when the user manually types inside the input. It actually changes with any date change, i.e. it's also noticeable for a brief moment when you click inside the menu on any date before the menu disappears.

We configured the recalculate-position prop, but removing it does nothing since the provided function isn't being invoked when this occurs, so the issue lies elsewhere.

I can't share the project because it's under the NDA.

To Reproduce Steps to reproduce the behavior:

  1. Open date picker
  2. Type something inside the input

Expected behavior The date picker menu stays where it has appeared.

Screen recording https://github.com/user-attachments/assets/a31bd99b-7006-4ff1-b317-f61da8e479dd

Desktop & mobile (please complete the following information):

Jasenkoo commented 1 month ago

It is possible that the change from this PR https://github.com/Vuepic/vue-datepicker/pull/829/commits/f955e2f2c75cecfdeeaf77a81a666679a132bdc7 breaks it, in any case, it will be reverted, I was not aware that it would break any existing behavior.

danulqua commented 1 month ago

@Jasenkoo It didn't fix the issue. Seems like I was wrong about the update from 8.2.0 to 9.0.0 and this problem has just been here for a while.

What can cause date picker to jump on text input or on value change, because I have no idea?

danulqua commented 1 month ago

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

This is what happens: in the style attribute of the .dp--menu-wrapper element the inset value is being changed: first value is being overwritten and the last one is totally removed.