Vue v-model external data change does not update the `<calendar-date>` month to the one containing the current date
Closed this issue · 9 comments
I'm using the <calendar-date> in vue with a v-mode.lazy pointing to a reactive variable.
- If outside code updates the reactive variable with a properly formatted date before a date has been selected in the component, the component will update to the correct month/year.
- If a date is selected in the component, but then the date is changed via the reactive variable outside of the component, the selection updates, but the month and year displayed does not, so the selection is not visible.
Interesting. Could you please provide a minimal reproduction if possible?
@ShadeDream any chance of a repro? Happy to get this fixed ASAP if you could provide one
If a date is selected in the component, but then the date is changed via the reactive variable outside of the component, the selection updates, but the month and year displayed does not, so the selection is not visible.
If I'm reading this right, you might want to set the focused-date attribute / focusedDate prop when you update the value externally. By default it doesn't do anything when the value changes outside of user interaction, since there's no single correct answer. Especially when it comes to things like ranges and multi date select.
Sorry about that, got busy and this has been problematic to set up in a pen while trying to keep things similar to the real application.
https://codepen.io/shadedream/pen/RwmPZvV
The behavior is slightly different than our real application but close enough. Basically, if you select a date in Cally, then change the date (year was our test case) in the input above, it will modify the reactive variable that Cally is modeled on (the updated value is output below to verify the correct formatting for Cally). In our real application it would update to the correct month/year but have no selection made. In this example it's behaving slightly different in that it doesn't respond at all to the reactive value change.
I tried your suggestion using the focusedDate property (comment line 22, uncomment line 23) and in this case Cally behaves like it does in our real app (changing year and month, but not selecting the actual day selection) but also the change does not appear to pass through to the reactive variable it's modeled on.
Let me know if something here doesn't make sense and I can try to explain the issue better.
No problems, just thought I'd chase it up.
Thanks for that, I'll take a look tomorrow
No rush on it, the year select in #37 alleviated the issue this was causing in our application, but seems to be a weird behavior nonetheless.
I'm not sure what's going on with the codepen, but when i recreate on stackblitz it works just fine https://stackblitz.com/edit/vitejs-vite-ghxhqd?file=src%2FApp.vue&terminal=dev
though i did get the same issues when i accidentally forgot to configure the isCustomElement option for vue's compiler on stackblitz.
I'm going to close this as I haven't been able to reproduce locally or via stackblitz. If you are still seeing the issue, please let me know
No worries. It's not code I was using anymore anyway since the addition of the ability to replace the year with a select. It may possibly be something odd I was doing that I didn't capture well. I'll reference your stackblitz example if I run into a similar need again. Thanks for taking a look at it.