From 1cca40d4c52d6e4fdfa338eca1f855c810c5fb83 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 13 Mar 2025 13:08:40 +0100
Subject: [PATCH] ui: fix calendar self-close

---
 .../components/WidgetDateRange/WidgetDateRange.tsx |  1 -
 .../shared/SelectDateRange/SelectDateRange.tsx     | 14 ++++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx b/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx
index 890b6fad3..92dd649d4 100644
--- a/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx
@@ -15,7 +15,6 @@ function WidgetDateRange({
   hasComparison = false,
   presetComparison = null,
 }: any) {
-  const { t } = useTranslation();
   const { dashboardStore, metricStore } = useStore();
   const density = dashboardStore.selectedDensity;
   const onDensityChange = (density: number) => {
diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
index 5cd0b1a7f..7b89e3227 100644
--- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
+++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
@@ -219,6 +219,7 @@ function AndDateRange({
   onApplyDateRange,
   isTileDisabled,
 }: Props) {
+  const customRangeRef = React.useRef(null);
   const { t } = useTranslation();
   const menuProps = {
     items: options.map((opt: any) => ({
@@ -280,22 +281,31 @@ function AndDateRange({
       {isCustom && (
         <OutsideClickDetectingDiv
           onClickOutside={(e: any) => {
+            if (customRangeRef.current && customRangeRef.current.contains(e.target)) {
+              return false;
+            }
             if (
               e.target.className.includes('react-calendar') ||
+              e.target.className.includes('ant-picker')
+            ) {
+              return false;
+            }
+            if (
               e.target.parentElement.parentElement.classList.contains(
                 'rc-time-picker-panel-select',
               ) ||
               e.target.parentElement.parentElement.classList[0]?.includes(
                 '-menu',
               ) ||
-              e.target.className.includes('ant-picker')
+              e.target.parentElement.className.includes('react-calendar')
             ) {
-              return false;
+              return false
             }
             setIsCustom(false);
           }}
         >
           <div
+            ref={customRangeRef}
             className={cn(
               'absolute top-0 mt-10 z-40',
               right ? 'right-0' : 'left-0',