mirror of
https://github.com/docmost/docmost.git
synced 2026-06-22 09:01:37 +10:00
fix(base): tab from long-text editor moves to next cell instead of leaving the table
This commit is contained in:
@@ -13,6 +13,7 @@ type CellLongTextProps = {
|
||||
onCommit: (value: unknown) => void;
|
||||
onValueChange: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
onTabNavigate?: (shiftKey: boolean) => void;
|
||||
};
|
||||
|
||||
const toText = (value: unknown) => (typeof value === "string" ? value : "");
|
||||
@@ -27,6 +28,7 @@ export function CellLongText({
|
||||
onCommit,
|
||||
onValueChange,
|
||||
onCancel,
|
||||
onTabNavigate,
|
||||
}: CellLongTextProps) {
|
||||
const [draft, setDraft] = useState(() => toText(value));
|
||||
const cancelledRef = useRef(false);
|
||||
@@ -127,7 +129,11 @@ export function CellLongText({
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === "Tab") {
|
||||
e.preventDefault();
|
||||
commit();
|
||||
onTabNavigate?.(e.shiftKey);
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
cancel();
|
||||
} else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
getDescriptor,
|
||||
} from "@/ee/base/property-types/property-type.registry";
|
||||
import { cellValuesEqual } from "@/ee/base/components/cells/cell-value-equal";
|
||||
import { computeNextCell } from "@/ee/base/utils/grid-cell-nav";
|
||||
import { useBaseEditable } from "@/ee/base/context/base-editable";
|
||||
import { useRowExpand } from "@/ee/base/context/row-expand";
|
||||
import { RowNumberCell } from "./row-number-cell";
|
||||
@@ -132,6 +133,31 @@ export const GridCell = memo(function GridCell({
|
||||
setEditingCell(null);
|
||||
}, [setEditingCell]);
|
||||
|
||||
const handleTabNavigate = useCallback(
|
||||
(shiftKey: boolean) => {
|
||||
if (!property) return;
|
||||
const tableInstance = cell.getContext().table;
|
||||
const colIds = tableInstance
|
||||
.getVisibleLeafColumns()
|
||||
.filter((c) => c.id !== "__row_number")
|
||||
.map((c) => c.id);
|
||||
const rowIds = tableInstance.getRowModel().rows.map((r) => r.id);
|
||||
const next = computeNextCell(
|
||||
rowIds,
|
||||
colIds,
|
||||
{ rowId, propertyId: property.id },
|
||||
0,
|
||||
shiftKey ? -1 : 1,
|
||||
true,
|
||||
);
|
||||
if (next) {
|
||||
setEditingCell(next);
|
||||
setFocusedCell(next);
|
||||
}
|
||||
},
|
||||
[cell, rowId, property, setEditingCell, setFocusedCell],
|
||||
);
|
||||
|
||||
if (isRowNumber) {
|
||||
return (
|
||||
<RowNumberCell
|
||||
@@ -175,6 +201,7 @@ export const GridCell = memo(function GridCell({
|
||||
onCommit={handleCommit}
|
||||
onValueChange={handleValueChange}
|
||||
onCancel={handleCancel}
|
||||
onTabNavigate={handleTabNavigate}
|
||||
/>
|
||||
{property.isPrimary && onExpandRow && !isEditing && (
|
||||
<span className={classes.rowExpandAnchor}>
|
||||
|
||||
@@ -17,6 +17,7 @@ export type CellComponentProps = {
|
||||
onCommit: (value: unknown) => void;
|
||||
onValueChange: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
onTabNavigate?: (shiftKey: boolean) => void;
|
||||
};
|
||||
|
||||
export type FilterInputKind =
|
||||
|
||||
Reference in New Issue
Block a user