Vue 3.5 - Uncaught TypeError: Cannot read properties of undefined (reading 'dayIndex')

[travist6983]

Just upgraded to vue 3.5.1 and it seems the reactive system in the latest from Vue is causing issues like below. Vue 3.4.38 worked just fine.

runtime-core.esm-bundler.js:51 [Vue warn]: Unhandled error during execution of native event handler 
  at <CalendarSlot name="day-content" day= 
{locale: Locale, id: '2024-09-25', position: 25, label: '25', ariaLabel: 'Wednesday, Sep 25, 2024', …}
 attributes= 
[Attribute]
  ... > 
  at <Anonymous key="2024-09-25" day= 
{locale: Locale, id: '2024-09-25', position: 25, label: '25', ariaLabel: 'Wednesday, Sep 25, 2024', …}
 > 
  at <CalendarPage> 
  at <CalendarSlot name="page" page= 
{id: '2024-09', month: 9, year: 2024, monthTitle: 'September 2024', shortMonthLabel: 'Sep', …}
 > 
  at <CalendarPageProvider key="2024-09" page= 
{id: '2024-09', month: 9, year: 2024, monthTitle: 'September 2024', shortMonthLabel: 'Sep', …}
 > 
  at <BaseTransition onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onTransitionAfterEnter> appear=false  ... > 
  at <Transition name="vc-fade" onBeforeEnter=fn<onTransitionBeforeEnter> onAfterEnter=fn<onTransitionAfterEnter> > 
  at <VCalendar key=1 attributes= 
[{…}]
 ref_key="calendarRef"  ... > 
  at <DatePickerBase > 
  at <BaseTransition onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<afterEnter> onBeforeLeave=fn<beforeLeave>  ... > 
  at <Transition name="vc-slide-fade" appear="" onBeforeEnter=fn<beforeEnter>  ... > 
  at <VPopover id= Symbol() placement="bottom-start" class="vc-date-picker-content vc-orange vc-light"  ... > 
  at <DatePickerPopover > 
  at <VDatePicker modelValue= Wed Sep 25 2024 00:00:00 GMT-0400 (Eastern Daylight Time) onUpdate:modelValue=fn color="orange"  ... > 
  at <DateField required=true > 
  at <FieldContainer field="dueDate" > 
  at <FormContainer form= 
CreateTaskForm {debounceMS: 1000, liveSubmit: false, hasLiveSubmitted: false}
 > 
  at <PersonalTaskPopup arg=null ref="componentRef" > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="bottom-slide" > 
  at <PopupPanel> 
  at <App>

index.js:3044 Uncaught TypeError: Cannot read properties of undefined (reading 'dayIndex')
    at DateRangeContext.render (index.js:3044:1)
    at index.js:5271:1
    at Array.forEach (<anonymous>)
    at index.js:5270:1
    at Array.forEach (<anonymous>)
    at ComputedRefImpl.fn (index.js:5269:1)
    at refreshComputed (reactivity.esm-bundler.js:357:1)
    at isDirty (reactivity.esm-bundler.js:324:1)
    at refreshComputed (reactivity.esm-bundler.js:347:1)
    at isDirty (reactivity.esm-bundler.js:324:1)

[sevenmay]

Same for me.

[nayan-7span]

Same here
On date change, we are getting this issue.

[visakadev]

I came across the same error, which is triggered when using InputEvents.
Vue 3.5.3
v-calendar 3.1.2

Uncaught TypeError: Cannot read properties of undefined (reading 'dayIndex').

[wc-yamamoto]

Same for me

[mikejang0109]

Same for me.

[NeutronSelector]

Same for me

[Arthurjim]

Same for me.

[ottopaulsen]

Please, folks. We don't need "Same for me". It is the same for all of us.
Just hit the subscribe-button, and I am sure @nathanreyes will let us know when this is solved.
I am subscribing, and I don't want to know about everyone that has the problem. I just want to know when it is solved.

[sewalsh]

Please, folks. We don't need "Same for me". It is the same for all of us. Just hit the subscribe-button, and I am sure @nathanreyes will let us know when this is solved. I am subscribing, and I don't want to know about everyone that has the problem. I just want to know when it is solved.

This repo hasn't seen a commit since Oct 2023. And all issues over the last year have been self-closed by users.

I suspect this project has been abandoned. I would highly doubt this issue will get resolved until a fork happens.

[trobonox]

Please, folks. We don't need "Same for me". It is the same for all of us. Just hit the subscribe-button, and I am sure @nathanreyes will let us know when this is solved. I am subscribing, and I don't want to know about everyone that has the problem. I just want to know when it is solved.

This repo hasn't seen a commit since Oct 2023. And all issues over the last year have been self-closed by users.

I suspect this project has been abandoned. I would highly doubt this issue will get resolved until a fork happens.

There has been some activity in the floating-ui branch 2 months ago. I would give it a few days and see if we can get a reply from the maintainer with a status report, considering this is a quite significant bug which breaks the core feature set for a lot of people. If they don't reply at all or can't fix this issue, it would be great to have some coordinated efforts to make a fork that everyone could migrate to.

[ErkanKabil]

any alternative suggestions here? maybe a new module or an older version of v-calender

[carlosvaldesweb]

For now, i'v changed v calendar to version: "v-calendar": "3.0.0" in package json and it works with vue 3.5

[abdulmanan-cowlar]

For now, i'v changed v calendar to version: "v-calendar": "3.0.0" in package json and it works with vue 3.5

Doesn't work for me, did you downgrade any other libs as well?

[idlethumbs]

UPDATE:
so I still do need to re-render as the deselected dates are buggy and still highlight due to the calendar internally preparing for a range selection - despite not being in range mode, so I still get the error... haven't been able to find a solution that updates the date displays without forcing a re-render of the component via a key.

// outdated:
maybe this will help someone:

I had this same error appear after upgrading vue in a multi-date implementation of the Datepicker,

I was forcing a re-render on date de-selection because it wasn't updating the display before, found that by adding keys to my composed date attributes (oops) I didn't need to force a re-render and this error also went away.

async function handleDayClick(day: CalendarDay, _event: MouseEvent) {
  ...

  if (valueIndex !== undefined && valueIndex >= 0 && (props.isMultiday || !props.isRequired)) {
    model.value?.splice(valueIndex, 1);
    // I used to force a re-render here 
    // reRenderKey.value += 1;
   ...
  } else if (props.isMultiday) {
  ...
  }
}

[DavidDeSloovere]

I can confirm that v-calendar v3.0.0 does not throw the dayIndex error
There is another issue however, selecting a date seems to automatically submit the form in some way.

Edit: 3.0.1 is also safe with vue 3.5, and fixes auto form submission because buttons now have a type attribute

[akorajac]

 @dayclick="
        (day, event) => {
          event.target.blur();
        }
      "

[abarke]

 @dayclick="
        (day, event) => {
          event.target.blur();
        }
      "

This silenced it for me! Thanks @akorajac. Here is the full context for clarity:

<VCalendarDatePicker
    <!-- other props -->
    @dayclick="
      (_, event) => {
        event.target.blur();
      }
    " />