fix(grid): unify transpose long-text editor style

This commit is contained in:
jearhe authored and GitHub committed 2026-08-30 00:47:34 +08:00
1 parent 508369ee39
commit 1302c0a27b
2 files changed
+33 -1

No files matched your search

+12 -1
View File
@@ -8329,6 +8329,15 @@ function transposeCellIsSelected(rowIndex: number, actualColIdx: number) {
return visibleColIdx >= 0 && cellIsSelected(rowIndex, visibleColIdx);
}
// Transposed cells render at a compact row height (30px by default), while the
// expanded editor (long text) grows well beyond that. Like the normal grid cell,
// the transposed cell must stop clipping its content while the editor / readonly
// text selection is active, otherwise the editor gets cropped below the row.
function transposeCellEditorActive(recordIndex: number, valueIndex: number): boolean {
const rowId = displayItems.value[recordIndex]?.id;
return (editingCell.value?.rowId === rowId && editingCell.value.col === valueIndex) || readonlyTextCellMatches(rowId, valueIndex);
}
function onTransposeCellMouseenter(rowIndex: number, actualColIdx: number) {
quickDownloadMenuCell.value = retainBinaryCellDownloadMenuForHover(quickDownloadMenuCell.value, { rowIndex, col: actualColIdx });
if (isScrolling.value) return;
@@ -12487,10 +12496,12 @@ function openGridSnapshot() {
<div
v-for="cell in item.values"
:key="`${item.id}:${cell.recordIndex}`"
class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0 truncate"
class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0"
:class="[
transposeCellTextColorClass(cell.recordIndex, cell.valueIndex),
{
'overflow-visible z-20 border-r-transparent': transposeCellEditorActive(cell.recordIndex, cell.valueIndex),
'overflow-hidden text-ellipsis whitespace-nowrap': !transposeCellEditorActive(cell.recordIndex, cell.valueIndex),
'cell-selected': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
'cell-selected-dirty': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
'cell-selected--sparse': transposeCellIsSelected(cell.recordIndex, cell.valueIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
@@ -33,4 +33,25 @@ describe("DataGrid transpose presentation", () => {
expect(dataGridSource).toContain("whitespace-pre-wrap break-words select-text");
expect(dataGridSource).not.toContain("data-grid-transpose-field-popover");
});
it("stops clipping the cell while the long-text editor or readonly text selection is active", () => {
// Transposed rows are compact (30px by default) while the expanded editor
// grows well beyond that; the cell must switch to overflow-visible while the
// editor / readonly text selection is active, mirroring the normal grid cell.
expect(dataGridSource).toContain("'overflow-visible z-20 border-r-transparent': transposeCellEditorActive(cell.recordIndex, cell.valueIndex)");
expect(dataGridSource).toContain("'overflow-hidden text-ellipsis whitespace-nowrap': !transposeCellEditorActive(cell.recordIndex, cell.valueIndex)");
expect(dataGridSource).toContain("function transposeCellEditorActive");
expect(dataGridSource).toContain("readonlyTextCellMatches(rowId, valueIndex)");
// The transposed cell no longer unconditionally truncates (overflow: hidden),
// which would crop the expanded editor below the compact row bounds.
expect(dataGridSource).not.toContain('class="relative flex shrink-0 items-center border-r border-border/70 px-2 py-0 truncate"');
});
it("shares the normal grid cell's editor overlay contract while editing", () => {
// Normal grid cells switch to the same overflow/z/border contract while the
// cell editor or readonly text selection is active, so long-text editing
// looks identical across both views.
expect(dataGridSource).toContain("'overflow-visible z-20 border-r-transparent': (editingCell?.rowId === item.id && editingCell?.col === col.actualColIdx) || readonlyTextCellMatches(item.id, col.actualColIdx),");
expect(dataGridSource).toContain("'overflow-hidden': !((editingCell?.rowId === item.id && editingCell?.col === col.actualColIdx) || readonlyTextCellMatches(item.id, col.actualColIdx)),");
});
});