From 135fc122c983da09fb2f8ce65f8428cd909770bb Mon Sep 17 00:00:00 2001
From: ER1KO <enricovagnetti@gmail.com>
Date: Thu, 10 Aug 2023 16:25:30 +0200
Subject: [PATCH] Possible fix for calendar position outside window

---
 src/components/Datepicker.tsx | 20 +-------------------
 src/components/Input.tsx      | 25 +++++++++++++++++--------
 2 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 54e90b7..6de0740 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -165,25 +165,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     );
     /* End Second */
 
-    // UseEffects & UseLayoutEffect
-    useEffect(() => {
-        const container = containerRef.current;
-        const calendarContainer = calendarContainerRef.current;
-        const arrow = arrowRef.current;
-
-        if (container && calendarContainer && arrow) {
-            const detail = container.getBoundingClientRect();
-            const screenCenter = window.innerWidth / 2;
-            const containerCenter = (detail.right - detail.x) / 2 + detail.x;
-
-            if (containerCenter > screenCenter) {
-                arrow.classList.add("right-0");
-                arrow.classList.add("mr-3.5");
-                calendarContainer.classList.add("right-0");
-            }
-        }
-    }, []);
-
+    
     useEffect(() => {
         if (value && value.startDate && value.endDate) {
             const startDate = dayjs(value.startDate);
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 38fc856..cd2b0f8 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -223,18 +223,28 @@ const Input: React.FC<Props> = (e: Props) => {
 
         function showCalendarContainer() {
             if (arrow && div && div.classList.contains("hidden")) {
+                
                 div.classList.remove("hidden");
                 div.classList.add("block");
 
-                // window.innerWidth === 767
                 const popoverOnUp = popoverDirection == "up";
-                const popoverOnDown = popoverDirection === "down";
-                if (
-                    popoverOnUp ||
+                const popoverOnDown = popoverDirection === "down";            
+                const calendarPosition = div.getBoundingClientRect();
+                const body = document.querySelector('body')!;
+                const bodyPosition = body.getBoundingClientRect();
+                const calcPosition = Math.ceil(calendarPosition.right - bodyPosition.right);
+                const finalPosition = calcPosition > 0 ? calcPosition : 0;
+                const leftPositionCalendar = `left:-${finalPosition}px`;
+                const leftPositionArrow = `left:${finalPosition}px`;
+                if(((calendarPosition.right > bodyPosition.right) || (calendarPosition.left < bodyPosition.left)) && window.innerWidth > 767) {                    
+                    div.setAttribute("style",leftPositionCalendar);
+                    arrow.setAttribute("style",leftPositionArrow);
+                }
+
+                if (popoverOnUp ||
                     (window.innerWidth > 767 &&
-                        window.screen.height - 100 < div.getBoundingClientRect().bottom &&
-                        !popoverOnDown)
-                ) {
+                        window.screen.height - 100 < calendarPosition.bottom &&
+                        !popoverOnDown)) {
                     div.classList.add("bottom-full");
                     div.classList.add("mb-2.5");
                     div.classList.remove("mt-2.5");
@@ -244,7 +254,6 @@ const Input: React.FC<Props> = (e: Props) => {
                     arrow.classList.remove("border-l");
                     arrow.classList.remove("border-t");
                 }
-
                 setTimeout(() => {
                     div.classList.remove("translate-y-4");
                     div.classList.remove("opacity-0");