From 54e233d7b9d47cdd9f61a0de3248b34c3f999fa3 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Wed, 2 Jul 2025 15:19:21 +0200
Subject: [PATCH] Fix bug date picker month and year dropdown not clickable
 (#12963)

This PR fixes a bug that only happens on workflow form inputs.

Clicking a month or year dropdown in the date picker header, will close
the whole date picker, instead of changing the year or month.

This is because the date picker considers that there is a click outside
happening.

So to fix that we use the excluded click outside id system.

Fixes https://github.com/twentyhq/twenty/issues/12922

See related issue to discuss the improvement of this system :
https://github.com/twentyhq/core-team-issues/issues/1166
---
 .../components/FormDateTimeFieldInput.tsx     |  4 ++
 .../components/AbsoluteDatePickerHeader.tsx   | 41 ++++++++++++-------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
index 925364684..dc3315d89 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx
@@ -153,6 +153,10 @@ export const FormDateTimeFieldInput = ({
       handlePickerClickOutside();
     },
     enabled: displayDatePicker,
+    excludedClickOutsideIds: [
+      MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
+      MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
+    ],
   });
 
   const handlePickerChange = (newDate: Nullable<Date>) => {
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx
index 716a53bcb..5e19995a6 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/AbsoluteDatePickerHeader.tsx
@@ -5,6 +5,7 @@ import { Select } from '@/ui/input/components/Select';
 import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
 
 import { getMonthSelectOptions } from '@/ui/input/components/internal/date/utils/getMonthSelectOptions';
+import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { IconChevronLeft, IconChevronRight } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 import {
@@ -76,20 +77,32 @@ export const AbsoluteDatePickerHeader = ({
       )}
 
       <StyledCustomDatePickerHeader>
-        <Select
-          dropdownId={MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID}
-          options={getMonthSelectOptions()}
-          onChange={onChangeMonth}
-          value={endOfDayInLocalTimezone.getMonth()}
-          fullWidth
-        />
-        <Select
-          dropdownId={MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID}
-          onChange={onChangeYear}
-          value={endOfDayInLocalTimezone.getFullYear()}
-          options={years}
-          fullWidth
-        />
+        <ClickOutsideListenerContext.Provider
+          value={{
+            excludedClickOutsideId: MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
+          }}
+        >
+          <Select
+            dropdownId={MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID}
+            options={getMonthSelectOptions()}
+            onChange={onChangeMonth}
+            value={endOfDayInLocalTimezone.getMonth()}
+            fullWidth
+          />
+        </ClickOutsideListenerContext.Provider>
+        <ClickOutsideListenerContext.Provider
+          value={{
+            excludedClickOutsideId: MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
+          }}
+        >
+          <Select
+            dropdownId={MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID}
+            onChange={onChangeYear}
+            value={endOfDayInLocalTimezone.getFullYear()}
+            options={years}
+            fullWidth
+          />
+        </ClickOutsideListenerContext.Provider>
         <LightIconButton
           Icon={IconChevronLeft}
           onClick={onSubtractMonth}