silevis / reactgrid

Add spreadsheet-like behavior to your React app
https://reactgrid.com
MIT License
1.24k stars 135 forks source link

Focus next row when pressing Enter at the last row cell #346

Closed merabtenei closed 6 months ago

merabtenei commented 8 months ago

First of all, I really appreciate the efforts you put into building this library, it's a great tool for us as developers.

When setting moveRightOnEnter to true in ReactGrid, the focus will stay on the same cell when hitting Enter on the last cell of the current row. Is there any possibility to make it move to the first cell of the next row ? Is that possible right now by using onFocusLocationChanged or onFocusLocationChanging ?

Edit: After digging a bit deeper, I think this can only be done using customCellTemplates and the handleKeyDown. My question is there a way to override the default handleKeyDown behavior for all Cell Templates without redefining a class for every built in Class Template (CheckboxCell, DataCell, TextCell, NumberCell ...) ?

Michota commented 8 months ago

At this moment I am working on v5-alpha, and my knowledge on v4-topics is very limited, but im pretty sure there is no way to change this behavior without completing the process you've described.

In v5 programmer will be able to fully redefine behaviors and related to handleKey functions related to them.

merabtenei commented 8 months ago

@Michota Thanks for the quick answer, I did that and I faced another problem. The DataGrid ref offers no utilities to focus on a specific cell, We can use the focusLocation prop but in that case, pointer and keyboard default beahvior will no longer work. Another possible way is to use setState directly and override the focusLocation there but it wasn't straight forward as CellLocation need { row, column } which have many props to provide rather than the simple let's say focus(colIndex, rowIndex).

When looking further at the code, I found these utilities :

{
  moveFocusLeft,
  moveFocusUp,
  moveFocusDown,
  moveFocusRight,
  moveFocusPageDown,
  moveFocusPageUp,
  moveFocusHome,
  moveFocusEnd,
} from "./focuses";

But can't import them as they are not exported from the library.

My last resort is to create a fork and hope to get what I need by making changes to the code maybe by overriding this part : https://github.com/silevis/reactgrid/blob/5c09f366ca6d077a78bbf46892633c47e278b568/src/lib/Functions/handleKeyDown.ts#L41C10-L41C31