Is it possible to use the arrow keys to trigger a cell edit?

[nicoalee]

Hello, I'd like to know if it's possible to use the Up/Right/Down/Left arrow keys while in cell edit mode to trigger the editor to complete the cell edit. The focus would then move based on the arrow key you hit (ArrowLeft would finish the cell edit and focus on the left cell, ArrowDown would finish cell edit and focus on the cell below, ... etc) My use case is that I'm trying to use the glide-data-grid but give it a more spreadsheet like feel when the user is interacting with it.

Things I've tried:

• using onKeyDown: This hook does not fire when in edit mode. The dataEditorRef also does not seem to have a method to complete eidt mode
• using onFinishedEditing(): the hook only fires after edit is complete, i.e. after enter or tab is pressed.

Let me know if there's any other information I can provide, thank you.

[BrianHung]

You will probably have to patch this line

https://github.com/glideapps/glide-data-grid/blob/2ad08c86f43e78de6512ed4e1378494a2c5b97d3/packages/core/src/data-grid-overlay-editor/data-grid-overlay-editor.tsx#L177

to pass onFinishEditing directly instead of onEditorFinished. And then use the movement as accordingly. Maybe submit a PR if implement something similar.

[rajp33]

Hi, this library is beautiful, thank you for all your hard work! I don't seem to be able to use the onFinishedEditing to change the cell while the editor is open. Are there any other things I should try?

[BrianHung]

You should be able to use onFinishEditing to close the editor and move the cell selection. How are you using it right now?

[rajp33]

@BrianHung That seems to be called when I press enter or escape or move out of the currently editing cell. I tried using patch-package to pass in onFinishedEditing instead of onEditorFinished like you mentioned above. I'm not sure that is working either but that might be because it's not actually applying in my vite build. Let me try one more time:

index 28850bc..ed7b50a 100644
--- a/node_modules/@glideapps/glide-data-grid/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx
+++ b/node_modules/@glideapps/glide-data-grid/src/internal/data-grid-overlay-editor/data-grid-overlay-editor.tsx
@@ -176,7 +176,10 @@ const DataGridOverlayEditor: React.FunctionComponent<DataGridOverlayEditorProps>
                 onChange={setTempValue}
                 value={targetValue}
                 initialValue={initialValue}
-                onFinishedEditing={onEditorFinished}
+                onFinishedEditing={(newVal, movement) => {
+                    console.log("newVal", newVal);
+                    console.log("movement", movement);
+                    onFinishEditing(newVal, movement || [0, 0])}}
                 validatedSelection={isEditableGridCell(targetValue) ? targetValue.selectionRange : undefined}
                 forceEditMode={forceEditMode}
                 target={target}

[BrianHung]

Yeah, if you're modifying the package in node_modules, make sure to clear your vite cache.

[rajp33]

I had to directly apply the patch to the compiled javascript code in the dist directory. I guess that makes sense.

Anyways I still wasn't able to use onFinishedEditing but I was able to get the desired behavior by adding this to the onKeyDown that wraps the editor:

--- a/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/data-grid-overlay-editor.js
+++ b/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/data-grid-overlay-editor.js
@@ -62,8 +62,30 @@ const DataGridOverlayEditor = p => {
             event.preventDefault();
             customMotion.current = [event.shiftKey ? -1 : 1, 0];
             save = true;
+        } else if (event.key === "ArrowDown") {
+            event.stopPropagation();
+            event.preventDefault();
+            customMotion.current = [0, 1];
+            save = true;
+        } else if (event.key === "ArrowUp") {
+            event.stopPropagation();
+            event.preventDefault();
+            customMotion.current = [0, -1];
+            save = true;
+        } else if (event.key === "ArrowLeft") {
+            event.stopPropagation();
+            event.preventDefault();
+            customMotion.current = [-1, 0];
+            save = true;
+        } else if (event.key === "ArrowRight") {
+            event.stopPropagation();
+            event.preventDefault();
+            customMotion.current = [1, 0];
+            save = true;
         }

Would it be a good idea to make that callback overridable?

[BrianHung]

The data editor has a onKeyDown prop; did you try using onFinishedEditing within that? Or is this internal onKeyDown closer to the event so it intercepts events first?

[rajp33]

I did try registering the onKeyDown handler but it wasn't being triggered while the editor cell was open. This is the internal onKeyDown, which yeah seems to intercept it earlier

[BrianHung]

Yep that sounds right; patching onFinishedEditing={onEditorFinished}

Should also work as long as you’re handling it in your onKeyDownHandler then.