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>
This commit is contained in:
Ashish Viradiya 2024-10-10 20:35:03 +05:30 committed by GitHub
parent bb2e825cfa
commit 2c927cfd7e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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>
);
};