force cell to go out from editing mode into selection mode (and control other keyboard events)

[danarish4]

Hey,
Is there a possibility to control keyboard events?
I'm rendering an editor component (with forceComponent: true) in each call and I need to control:

1.press Escape key while editing cell should go out from editing mode to select mode
2.press Tab key while editing cell should go out from editing mode to select mode and navigate to the next cell
2.press right \ left keys while editing cell will not navigate to the next cells

Thanks!

[navidadelpour]

Hey @danarish4.

Is there a possibility to control keyboard events?

Yes, but you need to use a custom DataEditor component which has onKeyDown, onCommit, onRevert props.
And as the doc mentions, you can control keyboard events behavior by overriding the default implementation.

For example:

const customHandleKeyDown = (e) => {
  const keyCode = e.which || e.keyCode;
  if (keyCode === ESCAPE_KEY) {
    return onRevert();
  }
  const commit = keyCode === ENTER_KEY || keyCode === TAB_KEY;

  if (commit) {
    onCommit(value, e);
  }
}

But as you said

I'm rendering an editor component (with forceComponent: true) in each call

As you always render a component, you can't use the advantage of data editor (cause there is no committing or reverting action).

Using component is like always rendering a editor and this means there is no edit mode or selection mode.