search

WickyNilliams / cally

Small, feature-rich calendar components
https://wicky.nillia.ms/cally/
MIT License
1.06k stars 12 forks source link

Vue v-model external data change does not update the `<calendar-date>` month to the one containing the current date #38

Closed ShadeDream closed 1 month ago

ShadeDream commented 1 month ago

I'm using the <calendar-date> in vue with a v-mode.lazy pointing to a reactive variable.

WickyNilliams commented 1 month ago

Interesting. Could you please provide a minimal reproduction if possible?

WickyNilliams commented 1 month ago

@ShadeDream any chance of a repro? Happy to get this fixed ASAP if you could provide one

WickyNilliams commented 1 month ago

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.

ShadeDream commented 1 month ago

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.

WickyNilliams commented 1 month ago

No problems, just thought I'd chase it up.

Thanks for that, I'll take a look tomorrow

ShadeDream commented 1 month ago

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.

WickyNilliams commented 1 month ago

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.

WickyNilliams commented 1 month ago

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

ShadeDream commented 1 month ago

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.