Fixed date input fields (#9442)

- Fixed date input fields : proper hotkey management, like other fields
- Removed DropdownUnmountEffect which was causing many bugs.

packages/twenty-front/src/hooks/useHotkeyScopeOnMount.ts

@@ -1,6 +1,10 @@
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useEffect } from 'react';
 
+/**
+ * @deprecated This hook uses useEffect
+ * Use event handlers and imperative code to manage hotkey scope changes.
+ */
 export const useHotkeyScopeOnMount = (hotkeyScope: string) => {
   const {
     goBackToPreviousHotkeyScope,

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx

@@ -24,7 +24,7 @@ export const DateFieldInput = ({
   onClear,
   onSubmit,
 }: DateFieldInputProps) => {
-  const { fieldValue, setDraftValue } = useDateField();
+  const { fieldValue, setDraftValue, hotkeyScope } = useDateField();
 
   const persistField = usePersistField();
 
@@ -77,6 +77,7 @@ export const DateFieldInput = ({
       onChange={handleChange}
       onClear={handleClear}
       onSubmit={handleSubmit}
+      hotkeyScope={hotkeyScope}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx

@@ -26,7 +26,7 @@ export const DateTimeFieldInput = ({
   onClear,
   onSubmit,
 }: DateTimeFieldInputProps) => {
-  const { fieldValue, setDraftValue } = useDateTimeField();
+  const { fieldValue, setDraftValue, hotkeyScope } = useDateTimeField();
 
   const persistField = usePersistField();
 
@@ -80,6 +80,7 @@ export const DateTimeFieldInput = ({
       isDateTimeInput
       onClear={handleClear}
       onSubmit={handleSubmit}
+      hotkeyScope={hotkeyScope}
     />
   );
 };

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 import { Nullable } from 'twenty-ui';
 
+import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import {
   InternalDatePicker,
   MONTH_AND_YEAR_DROPDOWN_ID,
@@ -8,7 +9,6 @@ import {
   MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
 } from '@/ui/input/components/internal/date/components/InternalDatePicker';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 export type DateInputProps = {
   value: Nullable<Date>;
@@ -24,6 +24,7 @@ export type DateInputProps = {
   onClear?: () => void;
   onSubmit?: (newDate: Nullable<Date>) => void;
   hideHeaderInput?: boolean;
+  hotkeyScope: string;
 };
 
 export const DateInput = ({
@@ -37,6 +38,7 @@ export const DateInput = ({
   onClear,
   onSubmit,
   hideHeaderInput,
+  hotkeyScope,
 }: DateInputProps) => {
   const [internalValue, setInternalValue] = useState(value);
 
@@ -65,17 +67,39 @@ export const DateInput = ({
     MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
   );
 
-  useListenClickOutside({
-    refs: [wrapperRef],
-    listenerId: 'DateInput',
-    callback: (event) => {
-      event.stopImmediatePropagation();
+  const handleEnter = () => {
+    closeDropdownYearSelect();
+    closeDropdownMonthSelect();
+    closeDropdown();
 
-      closeDropdownYearSelect();
-      closeDropdownMonthSelect();
-      closeDropdown();
-      onClickOutside(event, internalValue);
-    },
+    onEnter?.(internalValue);
+  };
+
+  const handleEscape = () => {
+    closeDropdownYearSelect();
+    closeDropdownMonthSelect();
+    closeDropdown();
+
+    onEscape?.(internalValue);
+  };
+
+  const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+    event.stopImmediatePropagation();
+
+    closeDropdownYearSelect();
+    closeDropdownMonthSelect();
+    closeDropdown();
+
+    onClickOutside(event, internalValue);
+  };
+
+  useRegisterInputEvents({
+    inputRef: wrapperRef,
+    inputValue: internalValue,
+    onEnter: handleEnter,
+    onEscape: handleEscape,
+    onClickOutside: handleClickOutside,
+    hotkeyScope: hotkeyScope,
   });
 
   return (

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
 import ReactDatePicker from 'react-datepicker';
-import { Key } from 'ts-key-enum';
 import {
   IconCalendarX,
   MenuItemLeftContent,
@@ -305,11 +304,8 @@ export const InternalDatePicker = ({
   date,
   onChange,
   onMouseSelect,
-  onEnter,
-  onEscape,
   clearable = true,
   isDateTimeInput,
-  keyboardEventsDisabled,
   onClear,
   isRelative,
   relativeDate,
@@ -345,31 +341,6 @@ export const InternalDatePicker = ({
     onMouseSelect?.(newDate);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (isDefined(keyboardEventsDisabled) && keyboardEventsDisabled) {
-      return;
-    }
-
-    switch (event.key) {
-      case Key.Enter: {
-        event.stopPropagation();
-        event.preventDefault();
-
-        closeDropdowns();
-        onEnter?.(internalDate);
-        break;
-      }
-      case Key.Escape: {
-        event.stopPropagation();
-        event.preventDefault();
-
-        closeDropdowns();
-        onEscape?.(internalDate);
-        break;
-      }
-    }
-  };
-
   const handleChangeMonth = (month: number) => {
     const newDate = new Date(internalDate);
     newDate.setMonth(month);
@@ -469,7 +440,7 @@ export const InternalDatePicker = ({
   const selectedDates = isRelative ? highlightedDates : [dateToUse];
 
   return (
-    <StyledContainer onKeyDown={handleKeyDown} calendarDisabled={isRelative}>
+    <StyledContainer calendarDisabled={isRelative}>
       <div className={clearable ? 'clearable ' : ''}>
         <ReactDatePicker
           open={true}

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -15,7 +15,6 @@ import { Keys } from 'react-hotkeys-hook';
 import { useDropdown } from '../hooks/useDropdown';
 
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
-import { DropdownUnmountEffect } from '@/ui/layout/dropdown/components/DropdownUnmountEffect';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponeInstanceContext';
 import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
 import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
@@ -165,7 +164,6 @@ export const Dropdown = ({
           />
         </>
       </DropdownScope>
-      <DropdownUnmountEffect dropdownId={dropdownId} />
     </DropdownComponentInstanceContext.Provider>
   );
 };

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownUnmountEffect.tsx

@@ -1,18 +0,0 @@
-import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
-import { useEffect } from 'react';
-
-export const DropdownUnmountEffect = ({
-  dropdownId,
-}: {
-  dropdownId: string;
-}) => {
-  const { closeDropdown } = useDropdownV2();
-
-  useEffect(() => {
-    return () => {
-      closeDropdown(dropdownId);
-    };
-  }, [closeDropdown, dropdownId]);
-
-  return null;
-};