Vuepic / vue-datepicker

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

iOS selecting dates with markers + label #904

Open jose-seabra opened 4 weeks ago

jose-seabra commented 4 weeks ago

Describe the bug On iOS, selecting dates with markers + label toggles the tooltip without selecting the date. The behavior on android is to toggle the tooltip and selects the date.

To Reproduce Steps to reproduce the behavior:

  1. Use an iOS device or emulator
  2. Go to this demo https://stackblitz.com/edit/vitejs-vite-qtgtb9 or serve it's example code to your device/emulator
  3. Click on a date with a marker
  4. See how the first click only opens the tooltip and a second click is required in order to select the date

Expected behavior I would expect iOS to have the same behavior as android, because as it is right now you need to click twice on a date in order to select it.

Screenshots Clicking once: image

Clicking twice: image

Desktop & mobile (please complete the following information):

I've played around with possible solutions and if we change the @click event for a @touchend event it behaves just as my expectation. <div v-if="dayVal.marker?.tooltip" class="dp__tooltip_content" @click="onTpClick"> <div v-if="dayVal.marker?.tooltip" class="dp__tooltip_content" @touchend="onTpClick"> src/VueDatePicker/components/DatePicker/DpCalendar.vue:94

I'm not knowledgeable enough to understand if such change would break other expected behaviors, but it appears to make it work the same on iOS/android/desktop

jose-seabra commented 3 weeks ago

Should this be handled with the allowPreventDefault config? It makes it so it doesn't require two clicks to select the date but the tooltip won't trigger

perruche commented 1 week ago

Having the same issue.