Touch Scrolling on inline calendar wrongfully triggers click events - bug introduced in 9.0.0

[exophunk]

Describe the bug
We use the inline calendar to show multiple calendar months below each other on a mobile device. Before, when scrolling (with touch) you could scroll the page containing the calendars normally. Version 8.8.1 was ok.

Starting with version 9, the touchstart event on top of a calendar item would trigger a click-event. So you basically cant scroll the page on top of a calendar without triggering a date selection.

This makes the calendar unusable in our case, as scrolling would automatically select any random date and with the range option, its almost impossible afterwards to select the right range.

To Reproduce

Reproduction: https://stackblitz.com/edit/vuepic-vue-datepicker-4aj8ctal?file=src%2Fcomponents%2FPlayground.vue

Steps to reproduce the behavior:

1. Use with mode "multi calendar" and "inline
2. Open on a touch device or on simulator with touch.
3. Make window narrow
4. try to scroll down with touch + drag
5. Try to scroll down without selecting dates. not possible

Expected behavior
I expect to use inline calendar on mobile without accidental clicks when scrolling

Desktop & mobile (please complete the following information):

• Mobile or Touch (firefox/ safari/chrome)
• Lib Version 9+
• Version 8.8.1 OK!

[Jasenkoo]

Unable to reproduce

[exophunk]

How exactly you're not able to reproduce?

Maybe it is difficult to run the Stackblitz reproduction on a mobile device or in the simulator. Therefore I uploaded the reproduction to a standalone location:

Reproduction: https://vdp.robertkrieg.dev
Screencast Video: https://vdp.robertkrieg.dev/screencast.mp4

The bug is very clearly reproducible. I can reproduce it in Chrome, Firefox, Safari as well as in the Devtools simulator with touch enabled. Is there a specific browser where you don't encounter the issue? Or does it need further explanation?

You can't scroll withouth accidentally selecting dates. I've added range="true" to even better show the issue. Imagine you want to select a date in 4-5 months and scroll there. You cant get there without accidentally selecting other dates first while scrolling. WIth range it becomes difficult to even select a date at all.

The datepicker code:

<Datepicker
  v-model="date"
  vertical
  inline
  :multi-calendars="5"
  :month-change-on-scroll="false"
  :config="{ noSwipe: true }"
  :range="true"
/>

If there is no intention in fixing the bug, at least a note in the docs would be helpful, that vue-datepicker inline is not supported on mobile.

[Jasenkoo]

Reopened, the bug is valid on iOS devices