WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

dp-input slot onInput handler not updating model value in v12.1.0 #1222

@kouts

Description

@kouts

Describe the bug
When using the dp-input slot with a custom input element, calling the exposed onInput function no longer updates the model value in version 12.1.0. This is a regression from version 12.0.5 where the same code works correctly.

To Reproduce
Steps to reproduce the behavior:

  • Use VueDatePicker with the dp-input slot
  • Provide a custom input element
  • Call the exposed onInput function when the input value changes
  • Type a valid date in the input field
<template>
  <VueDatePicker 
    v-model="date" 
    model-type="yyyy-MM-dd" 
    :formats="{ input: 'dd-MMM-yyyy' }" 
    :auto-apply="true"
  >
    <template #dp-input="{ value, onInput, onClear }">
      <input 
        type="text" 
        :value="value" 
        @input="handleInput($event, onInput, onClear)" 
      />
    </template>
  </VueDatePicker>
  <div>Model value: {{ date }}</div>
</template>

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

const date = ref();

const handleInput = (e: Event, onInputFn: (e: Event) => void, onClearFn: (e: Event) => void) => {
  if (e.target instanceof HTMLInputElement && e.target.value === '') {
    onClearFn(e);
    return;
  }
  onInputFn(e);
};
</script>

Expected Behavior
When typing a valid date (e.g., "18-Dec-2025") in the custom input and the onInput function is called:
The date should be parsed according to the formats.input format
The model value should be updated to the parsed date in modelType format (e.g., "2025-12-18")
This works correctly in v12.0.5.

Stackblitz Links
v12.0.5 (Working): https://stackblitz.com/edit/github-bgfv7iv5-cb6jnnet?file=src%2Fviews%2FHome.vue
v12.1.0 (Broken): https://stackblitz.com/edit/github-bgfv7iv5-9nahr6kn?file=src%2Fviews%2FHome.vue

Video

firefox_Ngts2i2An8.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    awaiting triageThe issue is not reviewed by the maintainersbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions