From aae1c57a72fd0994927cacb4c75d9ffd737d2672 Mon Sep 17 00:00:00 2001
From: Jasenko Karovic <karovicm995@gmail.com>
Date: Sat, 6 Apr 2024 21:46:10 +0200
Subject: [PATCH] refactor: Update arrow positioning logic (#802)

---
 src/VueDatePicker/VueDatePicker.vue             |  8 ++++----
 src/VueDatePicker/components/DatepickerMenu.vue | 11 +++++++----
 src/VueDatePicker/interfaces.ts                 |  1 +
 src/VueDatePicker/props.ts                      |  2 +-
 src/VueDatePicker/utils/defaults.ts             |  1 +
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/VueDatePicker/VueDatePicker.vue b/src/VueDatePicker/VueDatePicker.vue
index 99fb1ba60..29522fb6d 100644
--- a/src/VueDatePicker/VueDatePicker.vue
+++ b/src/VueDatePicker/VueDatePicker.vue
@@ -37,7 +37,7 @@
                         :open-on-top="openOnTop"
                         :no-overlay-focus="noOverlayFocus"
                         :collapse="collapse"
-                        :input-width="inputWidth"
+                        :get-input-rect="getInputRect"
                         @close-picker="closeMenu"
                         @select-date="selectDate"
                         @auto-apply="autoApplyValue"
@@ -259,9 +259,9 @@
         );
     });
 
-    const inputWidth = computed(() => {
-        return inputRef.value?.$el?.getBoundingClientRect()?.width ?? 0;
-    });
+    const getInputRect = () => {
+        return inputRef.value?.$el?.getBoundingClientRect();
+    };
 
     /**
      * Event listener for 'scroll'
diff --git a/src/VueDatePicker/components/DatepickerMenu.vue b/src/VueDatePicker/components/DatepickerMenu.vue
index 2e3a9d738..23c9b22b9 100644
--- a/src/VueDatePicker/components/DatepickerMenu.vue
+++ b/src/VueDatePicker/components/DatepickerMenu.vue
@@ -173,10 +173,10 @@
         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 },
+        getInputRect: { type: Function as PropType<() => DOMRect>, default: () => ({}) },
     });
 
-    const dpMenuRef = ref(null);
+    const dpMenuRef = ref<HTMLElement | null>(null);
 
     const baseProps = computed(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -247,8 +247,11 @@
     });
 
     const arrowPos = computed(() => {
-        if (props.inputWidth < calendarWidth.value) {
-            return `${props.inputWidth / 2}px`;
+        if (defaultedConfig.value.arrowLeft) return defaultedConfig.value.arrowLeft;
+        const menuRect = dpMenuRef.value?.getBoundingClientRect();
+        const inputRect = props.getInputRect();
+        if (inputRect.width < calendarWidth.value && inputRect.left <= (menuRect?.left ?? 0)) {
+            return `${inputRect.width / 2}px`;
         }
         return '50%';
     });
diff --git a/src/VueDatePicker/interfaces.ts b/src/VueDatePicker/interfaces.ts
index 0584d5572..77632db54 100644
--- a/src/VueDatePicker/interfaces.ts
+++ b/src/VueDatePicker/interfaces.ts
@@ -281,6 +281,7 @@ export interface Config {
     keepActionRow: boolean;
     onClickOutside?: (validate: () => boolean) => void;
     tabOutClosesMenu: boolean;
+    arrowLeft?: string;
 }
 
 export interface Highlight {
diff --git a/src/VueDatePicker/props.ts b/src/VueDatePicker/props.ts
index ff1121622..cbbb7c8b1 100644
--- a/src/VueDatePicker/props.ts
+++ b/src/VueDatePicker/props.ts
@@ -174,7 +174,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 },
+    getInputRect: { type: Function as PropType<() => DOMRect>, default: () => ({}) },
 };
 
 export type AllPropsType = ExtractPropTypes<typeof AllProps>;
diff --git a/src/VueDatePicker/utils/defaults.ts b/src/VueDatePicker/utils/defaults.ts
index 4e3dc75bb..5f4efe686 100644
--- a/src/VueDatePicker/utils/defaults.ts
+++ b/src/VueDatePicker/utils/defaults.ts
@@ -167,6 +167,7 @@ export const getDefaultConfig = (config?: Partial<Config>): Config => {
         keepActionRow: false,
         onClickOutside: undefined,
         tabOutClosesMenu: true,
+        arrowLeft: undefined,
     };
     return { ...defaultConfig, ...(config ?? {}) };
 };