Skip to content

Commit

Permalink
Fix focused cell view (#7451)
Browse files Browse the repository at this point in the history
Fixes #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 <[email protected]>
  • Loading branch information
AshishViradiya153 and lucasbordeau authored Oct 10, 2024
1 parent bb2e825 commit 2c927cf
Showing 1 changed file with 4 additions and 8 deletions.
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>
);
};

0 comments on commit 2c927cf

Please sign in to comment.