Dom value not updated when using typeable

[julsbreakdown]

Hello,
I am having issues when reseting a date.
When selecting a date using the datepicker every thing works as expected.
However when i type the date inside the input (using typeable=true), the dom value is not updated.
The prop value however is updated.

<datepicker
          :typeable="true"
          :value="minDate"
          :language="fr"
          format="dd/MM/yyyy"
          v-on:selected="$emit('min-date', $event)"
          v-on:input="$emit('min-date', $event)"
          input-class="datepicker-input"
        >
</datepicker>

    props: {
      name: String,
      minDate: Date,
      maxDate: Date,
    },
   watch: {
      minDate: function (newVal, oldVal) { // watch it
        console.log('Prop changed: ', newVal, ' | was: ', oldVal)
      }
    },

When changing the value with the datepicker, both newVal & oldVal are correct, and the Dom IS UPDATED
But when changing the value using the input, both newVal & oldVal are correct, and the Dom IS NOT UPDATED

Thanks in advance for any feeback

[MrWook]

Hey, i will look into it next week.

In the meantime did you try to use v-model?
v-model should be always up to date and you could watch the value from it

[julsbreakdown]

I did try both. No change =(
Thanks

[MrWook]

Hey, i tested your case with v-model and everything seems to be correct.

If i select a date or type it, the events and the model will change to the new date even if i get the date with a js selector like document.querySelector(".myInput").value

Maybe the events are confusing because a blur event on the input field will trigger the other events again. In this trigger the new and old value are the same.

For example if you have the date 2020-05-05 and you change it either by typing or selecting to 2021-06-06 the events will trigger on the selection or typing and have the values like this:
newVal: 2021-06-06
oldVal: 2020-05-05

If you click on something else so that the blur event on the input field is triggered the other events are triggered as well and results in:
newVal: 2021-06-06
oldVal: 2021-06-06

Let me know if this is what bugs you.

[julsbreakdown]

hello @MrWook
Thanks for the feedback, my problem remains. I will try to explain it differently.
Using the logs:

1st log is when selecting 04/05 using the datepicker widget
2nd log is reseting the input Value => initial value is displayed correctly in the input 01/05
3rd log is when changing the date inside the input (typeable)
4th log is when the focus leaves the input
5th log is reseting the input Value => initial value is not displayed, it is still 04/05 in the input

Dates are reset in log 2 & 5 and the values logged are identical. But not the displayed value inside the input text
Thanks

[MrWook]

I'm still confused. If i add the clear-button prop to reset the date it's still working even if i add a new button to clear the model everything is updated.
Do you mind creating a reproduction repo or some kind of codesandbox online so i can check it out?

[julsbreakdown]

Hello @MrWook
Here is a codepen
https://codepen.io/jujulelama/pen/rNWLENV

Change the value directly in the input to 2025 for example.
Then click on reset => date does not change
Change the value using the datepicker to 2025
Then click on reset => date is updated

[MrWook]

For me everything works fine :/
Which browser are you using?

[julsbreakdown]

I press enter after typing the input

[MrWook]

Ah yes i see thank you for the report, i will try and fix it

[julsbreakdown]

@MrWook Thanks for the fixe, when will you do the next release?