Datepicker v-model not reactive when removing date


Topic: Datepicker v-model not reactive when removing date

NoahConn pro asked 3 years ago

*Expected behavior*When I assign the v-model of the date picker to an empty string to clear the input, the v-model will change and the component will display nothing.

*Actual behavior*When I assign the v-model of the date picker to an empty string to clear the input, the v-model changes and but display the previous value is still displayed.

Resources (screenshots, code snippets etc.)

<template>
  <div>Current v-model: {{date}}</div>
  <MDBDatepicker 
    v-model="date"
    label="DatePicker"
    format="YYYY-MM-DD"
  />
  <MDBBtn @click="addDate">Add date</MDBBtn>
  <MDBBtn @click="removeDate">Remove date</MDBBtn>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import { MDBDatepicker, MDBBtn } from 'mdb-vue-ui-kit'
const date = ref('')
const addDate = () => {
  date.value = '2000-01-01'
}
const removeDate = () => {
  date.value = ''
}
</script>

Here is a working replication of the issue:

  • First click 'Add date' to populate the input field

  • Then click 'Removed date' to unpopulate the field.

The v-model will disappear above the input but the input value will stay the same.

Additionally, Vue Dev tools is showing that the modelValue prop and the inputValue ref within the component are not being updated by empty strings.

Another issue I ran into was that disabling DatePicker still allows for the user to click the datepicker modal.


Mikołaj Smoleński staff commented 3 years ago

Thank you for posting an issue, we're going to fix it as soon as possible.

Keep coding,  Mikołaj from MDB


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 1.11.0
  • Device: Macbook Pro 2021
  • Browser: Chrome
  • OS: macOS Monterey
  • Provided sample code: No
  • Provided link: No