fix: Tab index reset after date is selected (fixes #115)

Author: Jasenkoo

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -36,6 +36,7 @@
                 <slot :name="slot" v-bind="args" />
             </template>
         </DatepickerInput>
+        <span tabindex="-1" ref="focusRef"></span>
         <teleport :to="teleport" :disabled="inline" v-if="isOpen">
             <DatepickerMenu
                 v-if="isOpen"
@@ -148,6 +149,7 @@
     const modelValueMap = toRef(props, 'modelValue');
     const dpMenuRef = ref(null);
     const inputRef = ref(null);
+    const focusRef = ref<HTMLElement | null>(null);
     provide('autoApply', props.autoApply);
     const formatLocaleRef = computed(() => props.formatLocale);
     provide('formatLocale', formatLocaleRef);
@@ -387,6 +389,7 @@
             if (inputRef.value) {
                 (inputRef.value as { unFocus: () => void }).unFocus();
             }
+            setSoftFocus();
         }
     };
 
@@ -408,6 +411,13 @@
         }
     };
 
+    // When menu is close, allows user interaction via keyboard down the DOM tree, focus the span el after dp
+    const setSoftFocus = (): void => {
+        if (focusRef.value) {
+            focusRef.value.focus({ preventScroll: true });
+        }
+    };
+
     onClickOutside(dpMenuRef, inputRef, closeMenu);
 
     defineExpose({