fix: date input click outside (#9676)

cc @lucasbordeau

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -6,12 +6,12 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
 import { FieldMetadataType } from '~/generated/graphql';
 
 import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
+import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
 import { useDateTimeField } from '../../../hooks/useDateTimeField';
 import {
   DateTimeFieldInput,
   DateTimeFieldInputProps,
 } from '../DateTimeFieldInput';
-
 const formattedDate = new Date(2022, 0, 1, 2, 0, 0);
 
 const DateFieldValueSetterEffect = ({ value }: { value: Date }) => {
@@ -81,6 +81,7 @@ const DateFieldInputWithContext = ({
         }}
         recordId={recordId}
       >
+        <StorybookFieldInputDropdownFocusIdSetterEffect />
         <DateFieldValueSetterEffect value={value} />
         <DateFieldValueGater
           onEscape={onEscape}
@@ -98,7 +99,7 @@ const enterJestFn = fn();
 const clickOutsideJestFn = fn();
 
 const meta: Meta = {
-  title: 'UI/Data/Field/Input/DateFieldInput',
+  title: 'UI/Data/Field/Input/DateTimeFieldInput',
   component: DateFieldInputWithContext,
   args: {
     value: formattedDate,

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

@@ -7,6 +7,7 @@ import { FieldMetadataType } from '~/generated/graphql';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
+import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
 import { useNumberField } from '../../../hooks/useNumberField';
 import { NumberFieldInput, NumberFieldInputProps } from '../NumberFieldInput';
 
@@ -56,6 +57,7 @@ const NumberFieldInputWithContext = ({
         }}
         recordId={recordId}
       >
+        <StorybookFieldInputDropdownFocusIdSetterEffect />
         <NumberFieldValueSetterEffect value={value} />
         <NumberFieldInput
           onEnter={onEnter}

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

@@ -6,6 +6,7 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
 import { FieldMetadataType } from '~/generated/graphql';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
+import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
 import { FieldContextProvider } from '../../../components/FieldContextProvider';
 import { useTextField } from '../../../hooks/useTextField';
 import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput';
@@ -56,6 +57,7 @@ const TextFieldInputWithContext = ({
         }}
         recordId={recordId}
       >
+        <StorybookFieldInputDropdownFocusIdSetterEffect />
         <TextFieldValueSetterEffect value={value} />
         <TextFieldInput
           onEnter={onEnter}

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents.ts

@@ -1,7 +1,12 @@
 import { Key } from 'ts-key-enum';
 
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from '~/utils/isDefined';
 
 export const useRegisterInputEvents = <T>({
@@ -25,9 +30,32 @@ export const useRegisterInputEvents = <T>({
   onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: T) => void;
   hotkeyScope: string;
 }) => {
+  const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
+
+  const { recordId, fieldDefinition } = useContext(FieldContext);
+
   useListenClickOutside({
     refs: [inputRef, copyRef].filter(isDefined),
     callback: (event) => {
+      const fieldDropdownFocusIdTableCell = getDropdownFocusIdForRecordField(
+        recordId,
+        fieldDefinition.fieldMetadataId,
+        'table-cell',
+      );
+
+      const fieldDropdownFocusIdInlineCell = getDropdownFocusIdForRecordField(
+        recordId,
+        fieldDefinition.fieldMetadataId,
+        'inline-cell',
+      );
+
+      if (
+        activeDropdownFocusId !== fieldDropdownFocusIdTableCell &&
+        activeDropdownFocusId !== fieldDropdownFocusIdInlineCell
+      ) {
+        return;
+      }
+
       onClickOutside?.(event, inputValue);
     },
     enabled: isDefined(onClickOutside),