admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix composite field edition (#12095)

Browse Source 
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
This commit is contained in:
Thomas Trompette
2025-05-16 18:58:32 +02:00
committed by GitHub
parent e48b84f241
commit eca5ef7cfe
2 changed files with 14 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
View File

@ -43,7 +43,6 @@ const StyledLabelAndIconContainer = styled.div`
`; `;
const StyledValueContainer = styled.div<{ readonly: boolean }>` const StyledValueContainer = styled.div<{ readonly: boolean }>`
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
display: flex; display: flex;
min-width: 0; min-width: 0;
position: relative; position: relative;
@ -72,7 +71,7 @@ const StyledLabelContainer = styled.div<{ width?: number }>`
width: ${({ width }) => width}px; width: ${({ width }) => width}px;
`; `;
const StyledInlineCellBaseContainer = styled.div` const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>`
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
display: flex; display: flex;
@ -80,6 +79,7 @@ const StyledInlineCellBaseContainer = styled.div`
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
user-select: none; user-select: none;
align-items: center; align-items: center;
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
`; `;
export const StyledSkeletonDiv = styled.div` export const StyledSkeletonDiv = styled.div`
@ -96,22 +96,19 @@ export const RecordInlineCellContainer = () => {
editModeContentOnly, editModeContentOnly,
} = useRecordInlineCellContext(); } = useRecordInlineCellContext();
const { isInlineCellInEditMode, openInlineCell } = useInlineCell();
const { recordId, fieldDefinition } = useContext(FieldContext); const { recordId, fieldDefinition } = useContext(FieldContext);
const shouldContainerBeClickable =
!readonly && !editModeContentOnly && !isInlineCellInEditMode;
if (isFieldText(fieldDefinition)) { if (isFieldText(fieldDefinition)) {
assertFieldMetadata(FieldMetadataType.TEXT, isFieldText, fieldDefinition); assertFieldMetadata(FieldMetadataType.TEXT, isFieldText, fieldDefinition);
} }
const { setIsFocused } = useFieldFocus(); const { setIsFocused } = useFieldFocus();
const { openInlineCell } = useInlineCell();
const handleDisplayModeClick = () => {
if (!readonly && !editModeContentOnly) {
openInlineCell();
}
};
const handleContainerMouseEnter = () => { const handleContainerMouseEnter = () => {
if (!readonly) { if (!readonly) {
setIsFocused(true); setIsFocused(true);
@ -132,9 +129,10 @@ export const RecordInlineCellContainer = () => {
return ( return (
<StyledInlineCellBaseContainer <StyledInlineCellBaseContainer
readonly={readonly ?? false}
onMouseEnter={handleContainerMouseEnter} onMouseEnter={handleContainerMouseEnter}
onMouseLeave={handleContainerMouseLeave} onMouseLeave={handleContainerMouseLeave}
onClick={handleDisplayModeClick} onClick={shouldContainerBeClickable ? openInlineCell : undefined}
> >
{(IconLabel || label) && ( {(IconLabel || label) && (
<StyledLabelAndIconContainer id={labelId}> <StyledLabelAndIconContainer id={labelId}>

18
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
View File

@ -50,19 +50,11 @@ export const RecordInlineCellValue = () => {
{!readonly && isInlineCellInEditMode && ( {!readonly && isInlineCellInEditMode && (
<RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode> <RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
)} )}
{editModeContentOnly ? ( <StyledClickableContainer readonly={readonly} isCentered={isCentered}>
<StyledClickableContainer readonly={readonly} isCentered={isCentered}> <RecordInlineCellDisplayMode>
<RecordInlineCellDisplayMode> {editModeContentOnly ? editModeContent : displayModeContent}
{editModeContent} </RecordInlineCellDisplayMode>
</RecordInlineCellDisplayMode> </StyledClickableContainer>
</StyledClickableContainer>
) : (
<StyledClickableContainer readonly={readonly} isCentered={isCentered}>
<RecordInlineCellDisplayMode>
{displayModeContent}
</RecordInlineCellDisplayMode>
</StyledClickableContainer>
)}
</> </>
); );
}; };