From 3018e3ac89b15211104f99d34f8f8fdc4bf1687a Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Fri, 11 Apr 2025 15:22:00 +0200
Subject: [PATCH] Fix date picker month/year dropdown (#11539)

Fixes https://github.com/twentyhq/twenty/issues/11524
---
 .../ui/field/input/components/DateInput.tsx   | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
index 3e98c3ed2..e921284ea 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
@@ -1,12 +1,15 @@
 import { useRef, useState } from 'react';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
+import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import {
   DateTimePicker,
   MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
   MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
 } from '@/ui/input/components/internal/date/components/InternalDatePicker';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
+import { useRecoilCallback } from 'recoil';
 import { Nullable } from 'twenty-ui/utilities';
 
 export type DateInputProps = {
@@ -79,15 +82,28 @@ export const DateInput = ({
     onEscape(internalValue);
   };
 
-  const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-    event.stopImmediatePropagation();
+  const handleClickOutside = useRecoilCallback(
+    ({ snapshot }) =>
+      (event: MouseEvent | TouchEvent) => {
+        const hotkeyScope = snapshot
+          .getLoadable(currentHotkeyScopeState)
+          .getValue();
 
-    closeDropdownYearSelect();
-    closeDropdownMonthSelect();
-
-    onEscape(internalValue);
-    onClickOutside(event, internalValue);
-  };
+        if (hotkeyScope?.scope === TableHotkeyScope.CellEditMode) {
+          closeDropdownYearSelect();
+          closeDropdownMonthSelect();
+          onEscape(internalValue);
+          onClickOutside(event, internalValue);
+        }
+      },
+    [
+      closeDropdownYearSelect,
+      closeDropdownMonthSelect,
+      onEscape,
+      onClickOutside,
+      internalValue,
+    ],
+  );
 
   useRegisterInputEvents({
     inputRef: wrapperRef,