diff --git a/src/Cell.tsx b/src/Cell.tsx index d39a54ce06..14916ebc6c 100644 --- a/src/Cell.tsx +++ b/src/Cell.tsx @@ -17,8 +17,6 @@ function Cell({ eventBus, dragHandleProps, onRowClick, - onFocus, - onKeyDown, onClick, onDoubleClick, onContextMenu, @@ -72,8 +70,6 @@ function Cell({ width: column.width, left: column.left }} - onFocus={onFocus} - onKeyDown={onKeyDown} onClick={wrapEvent(handleClick, onClick)} onDoubleClick={wrapEvent(handleDoubleClick, onDoubleClick)} onContextMenu={wrapEvent(handleContextMenu, onContextMenu)} diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index e806cdccd4..f3258c189d 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -20,6 +20,7 @@ import SummaryRow from './SummaryRow'; import { assertIsValidKeyGetter, getColumnScrollPosition, + onEditorNavigation, getNextSelectedCellPosition, isSelectedCellEditable, canExitGrid, @@ -722,6 +723,10 @@ function DataGrid({ } function navigate(event: React.KeyboardEvent) { + if (selectedPosition.mode === 'EDIT') { + const onNavigation = columns[selectedPosition.idx].editorOptions?.onNavigation ?? onEditorNavigation; + if (!onNavigation(event)) return; + } const { key, shiftKey } = event; const ctrlKey = isCtrlKeyHeldDown(event); let nextPosition = getNextPosition(key, ctrlKey, shiftKey); diff --git a/src/editors/TextEditor.tsx b/src/editors/TextEditor.tsx index e9130f76cd..00b6e56a9f 100644 --- a/src/editors/TextEditor.tsx +++ b/src/editors/TextEditor.tsx @@ -19,11 +19,6 @@ export default function TextEditor({ value={row[column.key as keyof TRow] as unknown as string} onChange={event => onRowChange({ ...row, [column.key]: event.target.value })} onBlur={() => onClose(true)} - onKeyDown={event => { - if (/^(Arrow(Left|Right)|Home|End)$/.test(event.key)) { - event.stopPropagation(); - } - }} /> ); } diff --git a/src/types.ts b/src/types.ts index f20615d6b2..a59db95f0c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -43,6 +43,8 @@ export interface Column { editOnClick?: boolean; /** Prevent default to cancel editing */ onCellKeyDown?: (event: React.KeyboardEvent) => void; + /** Control the default cell navigation behavior while the editor is open */ + onNavigation?: (event: React.KeyboardEvent) => boolean; // TODO: Do we need these options // editOnDoubleClick?: boolean; /** @default false */ diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts index a10fac01f8..283fbde179 100644 --- a/src/utils/columnUtils.ts +++ b/src/utils/columnUtils.ts @@ -189,3 +189,16 @@ export function getColumnScrollPosition(columns: readonly CalculatedColum return 0; } + +/** + * By default, the following navigation keys are enabled while an editor is open, under specific conditions: + * - Tab: + * - The editor must be an , a