refactor: Position menu arrow based on the input width (fixes #802)

Author: Jasenkoo

src/VueDatePicker/VueDatePicker.vue

@@ -37,6 +37,7 @@
                         :open-on-top="openOnTop"
                         :no-overlay-focus="noOverlayFocus"
                         :collapse="collapse"
+                        :input-width="inputWidth"
                         @close-picker="closeMenu"
                         @select-date="selectDate"
                         @auto-apply="autoApplyValue"
@@ -258,6 +259,10 @@
         );
     });
 
+    const inputWidth = computed(() => {
+        return inputRef.value?.$el?.getBoundingClientRect()?.width ?? 0;
+    });
+
     /**
      * Event listener for 'scroll'
      * Depending on the props, it can close the menu or set correct position

src/VueDatePicker/components/DatepickerMenu.vue

@@ -6,6 +6,7 @@
         role="dialog"
         :aria-label="ariaLabels?.menu"
         :class="dpMenuClass"
+        :style="{ '--dp-arrow-left': arrowPos }"
         @mouseleave="clearHoverDate"
         @click="handleDpMenuClick"
         @keydown.esc="handleEsc"
@@ -172,6 +173,7 @@
         internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
         noOverlayFocus: { type: Boolean as PropType<boolean>, default: false },
         collapse: { type: Boolean as PropType<boolean>, default: false },
+        inputWidth: { type: Number as PropType<number>, default: 0 },
     });
 
     const dpMenuRef = ref(null);
@@ -244,6 +246,13 @@
         return DatePicker;
     });
 
+    const arrowPos = computed(() => {
+        if (props.inputWidth < calendarWidth.value) {
+            return `${props.inputWidth / 2}px`;
+        }
+        return '50%';
+    });
+
     const focusMenu = (): void => {
         const menu = unrefElement(dpMenuRef);
         if (menu) {

src/VueDatePicker/props.ts

@@ -173,6 +173,7 @@ export const PickerBaseProps = {
     noOverlayFocus: { type: Boolean as PropType<boolean>, default: false },
     collapse: { type: Boolean as PropType<boolean>, default: false },
     menuWrapRef: { type: Object as PropType<HTMLElement | null>, default: null },
+    inputWidth: { type: Number as PropType<number>, default: 0 },
 };
 
 export type AllPropsType = ExtractPropTypes<typeof AllProps>;

src/VueDatePicker/style/components/_DatepickerMenu.scss

@@ -98,7 +98,7 @@
 
 
 .dp__arrow_top {
-  left: 50%;
+  left: var(--dp-arrow-left);
   top: 0;
   height: 12px;
   width: 12px;
@@ -110,7 +110,7 @@
 }
 
 .dp__arrow_bottom {
-  left: 50%;
+  left: var(--dp-arrow-left);
   bottom: 0;
   height: 12px;
   width: 12px;