Dash editable DataTable issues

[CmpCtrl]

Describe your context

dash                          2.3.1
dash-core-components          2.0.0
dash-html-components          2.0.0
dash-table                    5.0.0

Describe the bug

The editable datatable could be really great for a data entry tool, but there are a number of inconsistencies in the behavior that are making it very tough to use in practice.

First up, the behavior of the enter key is inconsistent in the bottom row (or tab in the rightmost column). Normally, when a cell becomes active and you begin to type, it clears the contents allowing you to enter a new value. Then, the enter key commits the change, and moves the active cell down 1. However, in the last row enter commits the change but then doesn't move, and importantly doesn't re-activate the cell such that if you type again, it appends to the existing value instead of clearing it first as it does normally.

I'm not familiar with typescript at all, but it seems like a quick and dirty fix for this particular issue would be to check if the nextCell is equal to active_cell and then set whatever flag indicates that the cell has newly become active before line 620 below. Perhaps that would be better accomplished inside the setProps function? https://github.com/plotly/dash/blob/693b62cc68701628b4836fc80f6306af5ae50a9b/components/dash-table/src/dash-table/components/ControlledTable/index.tsx#L612-L628

Alternately, changing the behavior of the enter key (and tab) to mimic the behavior when a range of cells is selected would be a good solution. When a range of cells is selected, enter in the bottom row of the selection goes to the top row of the next column. I would argue that with no selection, the table should behave the same way (i understand Excel doesn't behave like that, but it effectively has infinite rows...).

Another related issue, is that the behavior of the del or backspace key is inconsistent. The element's data is cleared immediately (which is different from any other entry), but it is still displayed in the active cell as if it is an entry until the enter key is pressed (at which point it clears). This is the most obvious when a range is selected, the range clears except for the active cell immediately. Things get really confusing if you begin to edit a cell, then use del or backspace then enter. Again, it doesn't affect the entry, and if there was a value in the cell it clears it immediately. But, if there wasnt a value in the cell initially, on enter, it now commits the entry (which i dont want since i just tried to delete it). So there is no clear or consistent way to correct a typo, you have to commit a bad change, then go back and edit it again.

The del key should clear the current entry, backspace should clear the last character of the current entry, and the underlying data should not be modified until the active_cell changes to be consistent with the other forms of entry.

Also, as a feature request, i would like escape to first clear a selection (if its larger than the active_cell) and then on a second press clear the active_cell without committing changes. Its frustrating that there is no built in way to clear the 'active_cell' once there is one.

I tried to make a gif to demonstrate, but struggled to get keyboard input with the low frame rate, all of these issues are reproducible in the help documentation. I know the descriptions above are hard to follow, so try editing a cell twice in the bottom row using enter to confirm the change. Then try to correct a typo in an entry using the backspace. Those will highlight the biggest issues in my opinion. https://dash.plotly.com/datatable/editable

I believe the following are related.

1800

plotly/dash-table#427

[CmpCtrl]

Also related plotly/dash-table#700

[halemade]

https://plotly.zendesk.com/agent/tickets/5944

Enterprise issue related to this ticket. User would like the ability to configure the click interactions. They also find the backspace issue problematic.