Instead of using application state and event listeners, leverage browsers' tabindex navigation. We'll still need to listen to the arrow keys, as well as enter and escape, but we can use focus() instead of updating the state.
One issue is how to make it so that if a user starts typing on a selected cell, it immediately enters "edit mode" and replaces the cell's value with whatever was typed. Ideally this would work with pasting as well.
The onpaste event looks promising, though it'd have to be bound to the document/window. And then we'd have to listen to onkeypress for regular typing. And then wire up the copy and cut event as well :-/ Kinda trading one native feature for another...
Unless we make all the cells contenteditable always, and somehow leverage the default behaviour of that. We'd have to have the cells always have the entire contents selected, and hide the selection...maybe set the onfocus event to set the cursor to the whole selection, then tweak the css to hide the cursor selection, then on the oninput event, set it to edit mode.
timwis
commented
7 years ago
Instead of using application state and event listeners, leverage browsers'
tabindexnavigation. We'll still need to listen to the arrow keys, as well as enter and escape, but we can usefocus()instead of updating the state.One issue is how to make it so that if a user starts typing on a selected cell, it immediately enters "edit mode" and replaces the cell's value with whatever was typed. Ideally this would work with pasting as well.
The
onpasteevent looks promising, though it'd have to be bound to thedocument/window. And then we'd have to listen toonkeypressfor regular typing. And then wire up thecopyandcutevent as well :-/ Kinda trading one native feature for another...Unless we make all the cells
contenteditablealways, and somehow leverage the default behaviour of that. We'd have to have the cells always have the entire contents selected, and hide the selection...maybe set theonfocusevent to set the cursor to the whole selection, then tweak the css to hide the cursor selection, then on theoninputevent, set it to edit mode.