Disable cell navigation while editing, add column.editorOptions.onNavigation

src/Cell.tsx

@@ -17,8 +17,6 @@ function Cell<R, SR>({
   eventBus,
   dragHandleProps,
   onRowClick,
-  onFocus,
-  onKeyDown,
   onClick,
   onDoubleClick,
   onContextMenu,
@@ -72,8 +70,6 @@ function Cell<R, SR>({
         width: column.width,
         left: column.left
       }}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
       onClick={wrapEvent(handleClick, onClick)}
       onDoubleClick={wrapEvent(handleDoubleClick, onDoubleClick)}
       onContextMenu={wrapEvent(handleContextMenu, onContextMenu)}

src/DataGrid.tsx

@@ -20,6 +20,7 @@ import SummaryRow from './SummaryRow';
 import {
   assertIsValidKeyGetter,
   getColumnScrollPosition,
+  onEditorNavigation,
   getNextSelectedCellPosition,
   isSelectedCellEditable,
   canExitGrid,
@@ -722,6 +723,10 @@ function DataGrid<R, SR>({
   }
 
   function navigate(event: React.KeyboardEvent<HTMLDivElement>) {
+    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);

src/editors/TextEditor.tsx

@@ -19,11 +19,6 @@ export default function TextEditor<TRow>({
       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();
-        }
-      }}
     />
   );
 }

src/types.ts

@@ -43,6 +43,8 @@ export interface Column<TRow, TSummaryRow = unknown> {
     editOnClick?: boolean;
     /** Prevent default to cancel editing */
     onCellKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /** Control the default cell navigation behavior while the editor is open */
+    onNavigation?: (event: React.KeyboardEvent<HTMLDivElement>) => boolean;
     // TODO: Do we need these options
     // editOnDoubleClick?: boolean;
     /** @default false */

src/utils/columnUtils.ts

@@ -189,3 +189,16 @@ export function getColumnScrollPosition<R, SR>(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 <input>, a <textarea>, or a <select> element.
+ *   - The editor element must be the only immediate child of the editor container/a label.
+ */
+export function onEditorNavigation({ key, target }: React.KeyboardEvent<HTMLDivElement>): boolean {
+  if (key === 'Tab' && (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)) {
+    return target.matches('.rdg-editor-container > :only-child, .rdg-editor-container > label:only-child > :only-child');
+  }
+  return false;
+}

stories/demos/components/Editors/SelectEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Select, { OptionTypeBase, OptionsType } from 'react-select';
 
 interface SelectEditorProps {
@@ -10,7 +10,6 @@ interface SelectEditorProps {
 }
 
 export function SelectEditor({ value, onChange, options, rowHeight, menuPortalTarget }: SelectEditorProps) {
-  const [isMenuOpen, setMenuOpen] = useState(true);
   return (
     <Select
       autoFocus
@@ -19,8 +18,6 @@ export function SelectEditor({ value, onChange, options, rowHeight, menuPortalTa
       onChange={o => onChange(o.value)}
       options={options}
       menuPortalTarget={menuPortalTarget as HTMLElement}
-      onMenuOpen={() => setMenuOpen(true)}
-      onMenuClose={() => setMenuOpen(false)}
       styles={{
         control: (provided) => ({
           ...provided,
@@ -33,15 +30,6 @@ export function SelectEditor({ value, onChange, options, rowHeight, menuPortalTa
           height: rowHeight - 1
         })
       }}
-      onKeyDown={event => {
-        if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key) && isMenuOpen) {
-          event.stopPropagation();
-        }
-
-        if (['ArrowLeft', 'ArrowRight'].includes(event.key)) {
-          event.stopPropagation();
-        }
-      }}
     />
   );
 }