5236 expandable list leave options when editing (twentyhq#5890)

Fixes twentyhq#5236 ## After ![image](https://github.com/twentyhq/twenty/assets/29927851/5f0f910c-11b0-40ce-9c59-34e7ce0c2741)
jpratt3000 · Jun 17, 2024 · d8034b1 · d8034b1
1 parent d99b9d1
commit d8034b1
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 41 deletions.
diff --git a/...-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx b/...-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
@@ -22,9 +22,9 @@ import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/use
 import { prefillRecord } from '@/object-record/utils/prefillRecord';
 
 const StyledSelectContainer = styled.div`
-  left: 0px;
   position: absolute;
-  top: -8px;
+  left: 0;
+  top: 0;
 `;
 
 type ActivityTargetInlineCellEditModeProps = {

diff --git a/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -34,7 +34,8 @@ const StyledLabelAndIconContainer = styled.div`
 
 const StyledValueContainer = styled.div`
   display: flex;
-  width: 100%;
+  flex-grow: 1;
+  min-width: 0;
 `;
 
 const StyledLabelContainer = styled.div<{ width?: number }>`

diff --git a/...y-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx b/...y-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
@@ -72,35 +72,40 @@ export const RecordInlineCellValue = ({
     return <RecordInlineCellSkeletonLoader />;
   }
 
-  return !readonly && isInlineCellInEditMode ? (
-    <RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
-  ) : editModeContentOnly ? (
-    <StyledClickableContainer readonly={readonly}>
-      <RecordInlineCellDisplayMode
-        disableHoverEffect={disableHoverEffect}
-        isDisplayModeContentEmpty={isDisplayModeContentEmpty}
-        isDisplayModeFixHeight={isDisplayModeFixHeight}
-        isHovered={isFocused}
-        emptyPlaceholder={showLabel ? 'Empty' : label}
-      >
-        {editModeContent}
-      </RecordInlineCellDisplayMode>
-    </StyledClickableContainer>
-  ) : (
-    <StyledClickableContainer
-      readonly={readonly}
-      onClick={handleDisplayModeClick}
-    >
-      <RecordInlineCellDisplayMode
-        disableHoverEffect={disableHoverEffect}
-        isDisplayModeContentEmpty={isDisplayModeContentEmpty}
-        isDisplayModeFixHeight={isDisplayModeFixHeight}
-        isHovered={isFocused}
-        emptyPlaceholder={showLabel ? 'Empty' : label}
-      >
-        {displayModeContent}
-      </RecordInlineCellDisplayMode>
-      {showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
-    </StyledClickableContainer>
+  return (
+    <>
+      {!readonly && isInlineCellInEditMode && (
+        <RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
+      )}
+      {editModeContentOnly ? (
+        <StyledClickableContainer readonly={readonly}>
+          <RecordInlineCellDisplayMode
+            disableHoverEffect={disableHoverEffect}
+            isDisplayModeContentEmpty={isDisplayModeContentEmpty}
+            isDisplayModeFixHeight={isDisplayModeFixHeight}
+            isHovered={isFocused}
+            emptyPlaceholder={showLabel ? 'Empty' : label}
+          >
+            {editModeContent}
+          </RecordInlineCellDisplayMode>
+        </StyledClickableContainer>
+      ) : (
+        <StyledClickableContainer
+          readonly={readonly}
+          onClick={handleDisplayModeClick}
+        >
+          <RecordInlineCellDisplayMode
+            disableHoverEffect={disableHoverEffect}
+            isDisplayModeContentEmpty={isDisplayModeContentEmpty}
+            isDisplayModeFixHeight={isDisplayModeFixHeight}
+            isHovered={isFocused}
+            emptyPlaceholder={showLabel ? 'Empty' : label}
+          >
+            {displayModeContent}
+          </RecordInlineCellDisplayMode>
+          {showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
+        </StyledClickableContainer>
+      )}
+    </>
   );
 };
diff --git a/...ules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/...ules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
@@ -142,15 +142,14 @@ export const RecordTableCellContainer = ({
             [styles.cellBaseContainerSoftFocus]: hasSoftFocus,
           })}
         >
-          {isInEditMode ? (
+          {isInEditMode && (
             <RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode>
-          ) : hasSoftFocus ? (
-            <>
-              <RecordTableCellSoftFocusMode
-                editModeContent={editModeContent}
-                nonEditModeContent={nonEditModeContent}
-              />
-            </>
+          )}
+          {hasSoftFocus ? (
+            <RecordTableCellSoftFocusMode
+              editModeContent={editModeContent}
+              nonEditModeContent={nonEditModeContent}
+            />
           ) : (
             <RecordTableCellDisplayMode>
               {nonEditModeContent}

diff --git a/...dules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx b/...dules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 
 const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModeProps>`
+  position: absolute;
   align-items: center;
   display: flex;
   min-width: 200px;