From eca5ef7cfe9bd0dd8e4dbc7b4635a94613cd685e Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Fri, 16 May 2025 18:58:32 +0200
Subject: [PATCH] Fix composite field edition (#12095)

Fixes https://github.com/twentyhq/twenty/issues/12056

Bug has been introduced by
https://github.com/twentyhq/twenty/pull/11983/files

Adding onClick on the container makes it always available. Before it was
only when not in edit mode.
It breaks the click outside of the `RecordInlineCell`.

This PR set the onClick only when not in edit mode.



https://github.com/user-attachments/assets/a44337a9-72e6-4de8-afa1-95de6b953459
---
 .../components/RecordInlineCellContainer.tsx  | 20 +++++++++----------
 .../components/RecordInlineCellValue.tsx      | 18 +++++------------
 2 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
index 0ca058098..fa81021da 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -43,7 +43,6 @@ const StyledLabelAndIconContainer = styled.div`
 `;
 
 const StyledValueContainer = styled.div<{ readonly: boolean }>`
-  cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
   display: flex;
   min-width: 0;
   position: relative;
@@ -72,7 +71,7 @@ const StyledLabelContainer = styled.div<{ width?: number }>`
   width: ${({ width }) => width}px;
 `;
 
-const StyledInlineCellBaseContainer = styled.div`
+const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>`
   box-sizing: border-box;
   width: 100%;
   display: flex;
@@ -80,6 +79,7 @@ const StyledInlineCellBaseContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
   user-select: none;
   align-items: center;
+  cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
 `;
 
 export const StyledSkeletonDiv = styled.div`
@@ -96,22 +96,19 @@ export const RecordInlineCellContainer = () => {
     editModeContentOnly,
   } = useRecordInlineCellContext();
 
+  const { isInlineCellInEditMode, openInlineCell } = useInlineCell();
+
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
+  const shouldContainerBeClickable =
+    !readonly && !editModeContentOnly && !isInlineCellInEditMode;
+
   if (isFieldText(fieldDefinition)) {
     assertFieldMetadata(FieldMetadataType.TEXT, isFieldText, fieldDefinition);
   }
 
   const { setIsFocused } = useFieldFocus();
 
-  const { openInlineCell } = useInlineCell();
-
-  const handleDisplayModeClick = () => {
-    if (!readonly && !editModeContentOnly) {
-      openInlineCell();
-    }
-  };
-
   const handleContainerMouseEnter = () => {
     if (!readonly) {
       setIsFocused(true);
@@ -132,9 +129,10 @@ export const RecordInlineCellContainer = () => {
 
   return (
     <StyledInlineCellBaseContainer
+      readonly={readonly ?? false}
       onMouseEnter={handleContainerMouseEnter}
       onMouseLeave={handleContainerMouseLeave}
-      onClick={handleDisplayModeClick}
+      onClick={shouldContainerBeClickable ? openInlineCell : undefined}
     >
       {(IconLabel || label) && (
         <StyledLabelAndIconContainer id={labelId}>
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
index e9ff2c3d3..5d369a42e 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
@@ -50,19 +50,11 @@ export const RecordInlineCellValue = () => {
       {!readonly && isInlineCellInEditMode && (
         <RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
       )}
-      {editModeContentOnly ? (
-        <StyledClickableContainer readonly={readonly} isCentered={isCentered}>
-          <RecordInlineCellDisplayMode>
-            {editModeContent}
-          </RecordInlineCellDisplayMode>
-        </StyledClickableContainer>
-      ) : (
-        <StyledClickableContainer readonly={readonly} isCentered={isCentered}>
-          <RecordInlineCellDisplayMode>
-            {displayModeContent}
-          </RecordInlineCellDisplayMode>
-        </StyledClickableContainer>
-      )}
+      <StyledClickableContainer readonly={readonly} isCentered={isCentered}>
+        <RecordInlineCellDisplayMode>
+          {editModeContentOnly ? editModeContent : displayModeContent}
+        </RecordInlineCellDisplayMode>
+      </StyledClickableContainer>
     </>
   );
 };