Call onRowsChange when using keyboard navigation(arrows).

[keepyourarrow]

Currently when I'm editing a cell, I'm able to call onRowsChange when I press enter or tab Is it possible to do the same behavior for arrows? ↑ ↓ currently they don't make you are just stuck in the cell editing.

[tbantle22]

I could use this as well

[amanmahajan7]

You can use column.editorOptions.onNavigation to override the default behavior.

something like

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;
}

...
const columns = [{
 ...
 key: 'name',
 editor: TextEditor,
 editorOptions={{
   onNavigation(event) {
     return onEditorNavigation(event) || event.key.startsWith('Arrow')';
   }
}]

[keepyourarrow]

thanks, it helped!