fix: multi-calendars not updating when entering date via text-input (fixes #894)

Author: Jasenkoo

src/VueDatePicker/VueDatePicker.vue

@@ -38,6 +38,7 @@
                         :no-overlay-focus="noOverlayFocus"
                         :collapse="collapse"
                         :get-input-rect="getInputRect"
+                        :is-text-input-date="isTextInputDate"
                         @close-picker="closeMenu"
                         @select-date="selectDate"
                         @auto-apply="autoApplyValue"
@@ -157,6 +158,7 @@
     const shouldFocusNext = ref(false);
     const shiftKeyActive = ref(false);
     const collapse = ref(false);
+    const isTextInputDate = ref(false);
 
     const { setMenuFocused, setShiftKey } = useState();
     const { clearArrowNav } = useArrowNavigation();
@@ -447,12 +449,16 @@
         const validDate = Array.isArray(date) ? !date.some((d) => !validateDate(d)) : validateDate(date);
         const validTime = isValidTime(date);
         if (validDate && validTime) {
+            isTextInputDate.value = true;
             internalModelValue.value = date;
             if (submit) {
                 shouldFocusNext.value = tabbed;
                 selectDate();
                 emit('text-submit');
             }
+            nextTick().then(() => {
+                isTextInputDate.value = false;
+            });
         }
     };
 

src/VueDatePicker/components/DatePicker/DatePicker.vue

@@ -177,13 +177,13 @@
     );
 
     watch(
-      defaultedMultiCalendars,
-      (newVal, oldVal) => {
-        if (newVal.count - oldVal.count > 0) {
-          assignMonthAndYear();
-        }
-      },
-      { deep: true },
+        defaultedMultiCalendars,
+        (newVal, oldVal) => {
+            if (newVal.count - oldVal.count > 0) {
+                assignMonthAndYear();
+            }
+        },
+        { deep: true },
     );
 
     /**

src/VueDatePicker/components/DatePicker/date-picker.ts

@@ -107,7 +107,7 @@ export const useDatePicker = (
         modelValue,
         (newVal, oldVal) => {
             if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
-                mapInternalModuleValues();
+                mapInternalModuleValues(props.isTextInputDate);
             }
         },
         { deep: true },

src/VueDatePicker/components/DatepickerMenu.vue

@@ -172,6 +172,7 @@
         noOverlayFocus: { type: Boolean as PropType<boolean>, default: false },
         collapse: { type: Boolean as PropType<boolean>, default: false },
         getInputRect: { type: Function as PropType<() => DOMRect>, default: () => ({}) },
+        isTextInputDate: { type: Boolean as PropType<boolean>, default: false },
     });
 
     const dpMenuRef = ref<HTMLElement | null>(null);

src/VueDatePicker/props.ts

@@ -181,6 +181,7 @@ export const PickerBaseProps = {
     collapse: { type: Boolean as PropType<boolean>, default: false },
     menuWrapRef: { type: Object as PropType<HTMLElement | null>, default: null },
     getInputRect: { type: Function as PropType<() => DOMRect>, default: () => ({}) },
+    isTextInputDate: { type: Boolean as PropType<boolean>, default: false },
 };
 
 export type AllPropsType = ExtractPropTypes<typeof AllProps>;