Arrow Key Navigation Not Working on First Calendar in Multi-Calendar Mode

[virochan999]

Description

When using vue-datepicker with multi-calendars and arrow-navigation props enabled, the keyboard arrow navigation is not functioning properly. Specifically, arrow key navigation works correctly on the second calendar but does not work at all on the first calendar.

Steps to Reproduce

1. Implement a date picker with both multi-calendars and arrow-navigation props enabled
2. Open the date picker
3. Try to navigate using arrow keys (left, right, up, down) on the first calendar
4. Notice that arrow navigation doesn't work
5. Click on the second calendar
6. Observe that arrow navigation works correctly on the second calendar

Current Implementation

<VueDatePicker 
  :placeholder="getPlaceHolder" 
  :month-change-on-arrows="true" 
  :locale="locale"
  :alt-position="customPosition" 
  :aria-labels="ariaLabels" 
  :day-names="getWeekDaysList" 
  week-start="0"
  :month-change-on-scroll="false" 
  :min-date="getMinDate" 
  :max-date="getMaxDate" 
  :enable-time-picker="false"
  :model-config="{ type: 'string', format: 'YYYY-MM-DD' }" 
  :format="() => ''" 
  ref="datepickerRef"
  v-model="dateRange" 
  @range-start="onRangeStart" 
  @range-end="onRangeEnd" 
  @open="openCalendar"
  hide-offset-dates 
  prevent-min-max-navigation 
  range 
  arrow-navigation 
  multi-calendars
/>

[harmeet1610]

"I’m also facing the same issue with calendar arrow navigation. Have you found any workaround or fix for this? I’d appreciate any updates from the maintainers or the community. Looking forward to a resolution!"

Let me know if you want to tweak it further!

[sahilrajthapa]

@virochan999 Currently, arrow navigation is only supported on the single calendar view. It is mentioned in the docs.

[github-actions]

Stale issue message

[github-actions]

Stale issue message