Skip to content

Auto-apply doesn't work for text input #1080

Closed
@cotowamasha

Description

@cotowamasha

Describe the bug
If user inputs correct dates to text input, vue-datepicker (with auto-apply prop) doesn't emit update:model-value, but it changes internal-model.

To Reproduce
Steps to reproduce the behavior:

  1. Make vue-dp like that:
<template>
    <div class="wrapper">
        selected: {{ selectedDate }}
        <Datepicker
            v-model="selectedDate"
            text-input
            range
            format="MM.dd.yyyy"
            multi-calendars
            position="left"
            auto-apply
            :config="{
                setDateOnMenuClose: true,
                closeOnClearValue: false,
                closeOnAutoApply: false,
                keepActionRow: true,
            }"
        >
            <template #dp-input="{ value, onInput }">
                <input :value="value" @input="onInput" />
            </template>
        </Datepicker>
    <div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';

    const selectedDate = ref();
</script>
  1. Select any dates in calendar.
  2. update:model-value emitted ✅
  3. Change time.
  4. update:model-value emitted ✅
  5. Change value in input
  6. update:model-value wasn't emitted ❌
  7. update:model-valueemits after close calendar or click Select button.

Expected behavior
If user inputs correct dates, vue-dp emits update:model-value immediately.

Screencast

2025-02-17.15.50.03.mov

Desktop & mobile:

  • Browser all
  • Library version 11.0.1

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