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,