Skip to content

Touch input fails to select a date on iOS Safari” #1066

Closed
@franzk

Description

@franzk

Describe the bug
On iOS Safari, tapping (touching) a date in the calendar does not select the date. This issue makes it impossible to choose a date using touch interactions on iOS devices.

To Reproduce

Steps to reproduce the behavior:

  1. Create a basic test app using the provided code snippet:
<template>
	<VueDatePicker v-model="date" />
</template>

<script setup>
import { ref } from "vue"
import VueDatePicker from "@vuepic/vue-datepicker"
import "@vuepic/vue-datepicker/dist/main.css"

const date = ref(null)
</script>
  1. Open the app on iOS Safari.
  2. Tap on the input field to open the calendar.
  3. Tap on a day cell in the calendar.
  4. Observe that the date is not selected.

Expected behavior
When tapping on a date in the calendar, this date should be selected.

Additional context
While investigating, I came across the following code in DpCalendar.vue:

const onDateSelect = (ev: Event, dayVal: ICalendarDay, isClick = true) => {
        if ((isClick && isIOS()) || (!isClick && !isIOS())) return; 

It seems this condition might be preventing the date selection on iOS devices. Could you confirm if this is intentional? If not, how can this be resolved to support touch interactions on iOS Safari?

Thank you for your support!

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions