Vuepic / vue-datepicker

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

Popup arrow is not placed properly when the calendar is wider than the input field #802

Closed Tsuyoshi84 closed 6 months ago

Tsuyoshi84 commented 6 months ago

Describe the bug The popup arrow pointing to the calendar's input field is not placed properly when the calendar is wider than the input field. This issue tends to occur when enabling multi-calendars since it widens the calendar popup.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://stackblitz.com/edit/vitejs-vite-xq8lnk?file=src%2FApp.vue
  2. Click on the input field
  3. You can see that the arrow is not pointing to the input field exactly

Expected behavior Ideally, the arrow should be placed under the center of the input field.

Screenshots image

Desktop & mobile (please complete the following information):

allusernamestakenexceptthis commented 6 months ago

Just to add. When you have two fields next to each other's, it may cause confusion or at best looks bad UX-wise.