fix: month and year dropdowns in settings logs date picker (#21529)

### Summary
- Fixes #21514 and Issue 2
- **Issue 1**: when opening the calendar and choosing a month or year,
those lists could appear underneath the calendar, making them impossible
to see and use. (Issue #21514)
- **Issue 2**: after opening the calendar icon menu, clicking the month
or year controls don't work, so you couldn’t actually change the month
or year.

Before:
<img width="355" height="434"
alt="607363028-0d3a302e-9dba-4d9a-b354-ad7cbcd1fba5"
src="https://github.com/user-attachments/assets/b1c357d1-a7cf-4572-8737-721cf4e2597a"
/>

After:


https://github.com/user-attachments/assets/ffc26447-ff34-4f11-a3b4-4c329e446ec4



<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21529?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

---------

Signed-off-by: Parship Chowdhury <parshipchowdhury@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx

@@ -5,6 +5,7 @@ import { VariableChipStandalone } from '@/object-record/record-field/ui/form-typ
 import { type VariablePickerComponent } from '@/object-record/record-field/ui/form-types/types/VariablePickerComponent';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import {
+  DATE_TIME_PICKER_MONTH_YEAR_PANEL_DROPDOWN_ID,
   DateTimePicker,
   MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
   MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
@@ -15,6 +16,7 @@ import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUs
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
+import { ParentClickOutsideIdContext } from '@/ui/utilities/pointer-event/contexts/ParentClickOutsideIdContext';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
@@ -133,6 +135,7 @@ export const FormDateTimeFieldInput = ({
     enabled: displayDatePicker,
     excludedClickOutsideIds: [
       FORM_DATE_TIME_FIELD_PICKER_CLICK_OUTSIDE_ID,
+      DATE_TIME_PICKER_MONTH_YEAR_PANEL_DROPDOWN_ID,
       MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
       MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
     ],
@@ -296,17 +299,21 @@ export const FormDateTimeFieldInput = ({
               }
             >
               <OverlayContainer>
-                <DateTimePicker
-                  instanceId={instanceId}
-                  date={dateValue}
-                  onChange={handlePickerChange}
-                  onClose={handlePickerMouseSelect}
-                  onEnter={handlePickerEnter}
-                  onEscape={handlePickerEscape}
-                  onClear={handlePickerClear}
-                  hideHeaderInput
-                  timeZone={timeZone}
-                />
+                <ParentClickOutsideIdContext.Provider
+                  value={FORM_DATE_TIME_FIELD_PICKER_CLICK_OUTSIDE_ID}
+                >
+                  <DateTimePicker
+                    instanceId={instanceId}
+                    date={dateValue}
+                    onChange={handlePickerChange}
+                    onClose={handlePickerMouseSelect}
+                    onEnter={handlePickerEnter}
+                    onEscape={handlePickerEscape}
+                    onClear={handlePickerClear}
+                    hideHeaderInput
+                    timeZone={timeZone}
+                  />
+                </ParentClickOutsideIdContext.Provider>
               </OverlayContainer>
             </div>
           </FloatingPortal>