Creating records in side panel not working (#10999)

Fixes https://github.com/twentyhq/core-team-issues/issues/624

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,12 +1,7 @@
 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 'twenty-shared';
 
 export const useRegisterInputEvents = <T>({
@@ -30,32 +25,9 @@ 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),

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx

@@ -21,10 +21,7 @@ import { isFieldSelect } from '@/object-record/record-field/types/guards/isField
 import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/multiple-record-picker/types/MultipleRecordPickerHotkeyScope';
 import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerHotkeyScope';
 import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope';
-import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
-import { useRecoilCallback } from 'recoil';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 import { RecordInlineCellContainer } from './RecordInlineCellContainer';
 import {
@@ -83,30 +80,15 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
     closeInlineCell();
   };
 
-  const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback(
+  const handleClickOutside: FieldInputClickOutsideEvent = (
-    ({ snapshot }) =>
+    persistField,
-      (persistField, event) => {
+    event,
-        const recordFieldDropdownId = getDropdownFocusIdForRecordField(
+  ) => {
-          recordId,
+    event.stopImmediatePropagation();
-          fieldDefinition.fieldMetadataId,
-          'inline-cell',
-        );
 
-        const activeDropdownFocusId = snapshot
+    persistField();
-          .getLoadable(activeDropdownFocusIdState)
+    closeInlineCell();
-          .getValue();
+  };
-
-        if (recordFieldDropdownId !== activeDropdownFocusId) {
-          return;
-        }
-
-        event.stopImmediatePropagation();
-
-        persistField();
-        closeInlineCell();
-      },
-    [closeInlineCell, fieldDefinition.fieldMetadataId, recordId],
-  );
 
   const { getIcon } = useIcons();
   const { openFieldInput, closeFieldInput } = useOpenFieldInputEditMode();

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx

@@ -5,10 +5,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
 import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
-import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
-import { useRecoilCallback } from 'recoil';
 
 export const RecordTableCellFieldInput = () => {
   const { recordId, fieldDefinition } = useContext(FieldContext);
@@ -43,35 +40,20 @@ export const RecordTableCellFieldInput = () => {
     onCloseTableCell();
   };
 
-  const handleClickOutside = useRecoilCallback(
+  const handleClickOutside = (
-    ({ snapshot }) =>
+    persistField: () => void,
-      (persistField: () => void, event: MouseEvent | TouchEvent) => {
+    event: MouseEvent | TouchEvent,
-        const dropdownFocusId = getDropdownFocusIdForRecordField(
+  ) => {
-          recordId,
+    event.stopImmediatePropagation();
-          fieldDefinition.fieldMetadataId,
-          'table-cell',
-        );
 
-        const activeDropdownFocusId = snapshot
+    onUpsertRecord({
-          .getLoadable(activeDropdownFocusIdState)
+      persistField,
-          .getValue();
+      recordId,
+      fieldName: fieldDefinition.metadata.fieldName,
+    });
 
-        if (activeDropdownFocusId !== dropdownFocusId) {
+    onCloseTableCell();
-          return;
+  };
-        }
-
-        event.stopImmediatePropagation();
-
-        onUpsertRecord({
-          persistField,
-          recordId,
-          fieldName: fieldDefinition.metadata.fieldName,
-        });
-
-        onCloseTableCell();
-      },
-    [fieldDefinition, onCloseTableCell, onUpsertRecord, recordId],
-  );
 
   const handleEscape: FieldInputEvent = (persistField) => {
     onUpsertRecord({

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx

@@ -15,10 +15,7 @@ import {
 } from '@/object-record/record-title-cell/components/RecordTitleCellContext';
 import { RecordTitleCellFieldDisplay } from '@/object-record/record-title-cell/components/RecordTitleCellFieldDisplay';
 import { RecordTitleCellFieldInput } from '@/object-record/record-title-cell/components/RecordTitleCellFieldInput';
-import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
-import { useRecoilCallback } from 'recoil';
 
 type RecordTitleCellProps = {
   loading?: boolean;
@@ -54,30 +51,15 @@ export const RecordTitleCell = ({
     closeInlineCell();
   };
 
-  const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback(
+  const handleClickOutside: FieldInputClickOutsideEvent = (
-    ({ snapshot }) =>
+    persistField,
-      (persistField, event) => {
+    event,
-        const recordFieldDropdownId = getDropdownFocusIdForRecordField(
+  ) => {
-          recordId,
+    event.stopImmediatePropagation();
-          fieldDefinition.fieldMetadataId,
-          'inline-cell',
-        );
 
-        const activeDropdownFocusId = snapshot
+    persistField();
-          .getLoadable(activeDropdownFocusIdState)
+    closeInlineCell();
-          .getValue();
+  };
-
-        if (recordFieldDropdownId !== activeDropdownFocusId) {
-          return;
-        }
-
-        event.stopImmediatePropagation();
-
-        persistField();
-        closeInlineCell();
-      },
-    [closeInlineCell, fieldDefinition.fieldMetadataId, recordId],
-  );
 
   const recordTitleCellContextValue: RecordTitleCellContextProps = {
     editModeContent: (

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldInput.tsx

@@ -65,6 +65,7 @@ export const RecordTitleCellTextFieldInput = ({
 
   return (
     <TextInputV2
+      ref={wrapperRef}
       autoGrow
       sizeVariant={sizeVariant}
       inheritFontStyles

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts

@@ -1,8 +1,6 @@
 import React, { useEffect } from 'react';
 import { useRecoilCallback } from 'recoil';
 
-import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
-import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
 import { internalHotkeysEnabledScopesState } from '@/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState';
 import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
 
@@ -190,32 +188,6 @@ export const useListenClickOutside = <T extends Element>({
             !isMouseDownInside &&
             !isClickedOnExcluded;
 
-          if (CLICK_OUTSIDE_DEBUG_MODE) {
-            const activeDropdownFocusId = snapshot
-              .getLoadable(activeDropdownFocusIdState)
-              .getValue();
-
-            const previousDropdownFocusId = snapshot
-              .getLoadable(previousDropdownFocusIdState)
-              .getValue();
-
-            // eslint-disable-next-line no-console
-            console.log('click outside compare refs', {
-              listenerId,
-              shouldTrigger,
-              isListening,
-              hasMouseDownHappened,
-              clickedOnAtLeastOneRef,
-              isMouseDownInside,
-              isClickedOnExcluded,
-              activeDropdownFocusId,
-              previousDropdownFocusId,
-              hotkeyScope,
-              enabled,
-              event,
-            });
-          }
-
           if (shouldTrigger) {
             callback(event);
           }