From 2c927cfd7e7e67a00bea84bd42a3fe65434c1567 Mon Sep 17 00:00:00 2001
From: Ashish Viradiya <116018976+AshishViradiya153@users.noreply.github.com>
Date: Thu, 10 Oct 2024 20:35:03 +0530
Subject: [PATCH] Fix focused cell view (#7451)

Fixes https://github.com/twentyhq/twenty/issues/5595
- The portal has been removed, and the focused cell is now rendered
directly within the relevant div/container.
- This ensures that the cell remains correctly positioned within the
table and is properly hidden or unfocused when the user scrolls
horizontally, fixing the issue of overlap or visibility on top of other
elements.

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/RecordTableCellEditMode.tsx           | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
index 16e59db8d..0e083492f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
@@ -1,7 +1,6 @@
-import { ReactElement } from 'react';
-import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
+import { ReactElement } from 'react';
 
 const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModeProps>`
   position: absolute;
@@ -44,12 +43,9 @@ export const RecordTableCellEditMode = ({
       ref={refs.setReference}
       data-testid="editable-cell-edit-mode-container"
     >
-      {createPortal(
-        <StyledTableCellInput ref={refs.setFloating} style={floatingStyles}>
-          {children}
-        </StyledTableCellInput>,
-        document.body,
-      )}
+      <StyledTableCellInput ref={refs.setFloating} style={floatingStyles}>
+        {children}
+      </StyledTableCellInput>
     </StyledEditableCellEditModeContainer>
   );
 };