fix: call onCellActivated on typing (#1055)

Author: BrianHung

packages/core/API.md

@@ -156,7 +156,7 @@ Most data grids will want to set the majority of these props one way or another.
 | [maxColumnAutoWidth](#maxcolumnwidth)                 | Sets the maximum width a column can be auto-sized to.                                                                                                                               |
 | [maxColumnWidth](#maxcolumnwidth)                     | Sets the maximum width the user can resize a column to.                                                                                                                             |
 | [minColumnWidth](#maxcolumnwidth)                     | Sets the minimum width the user can resize a column to.                                                                                                                             |
-| [onCellActivated](#oncellactivated)                   | Emitted when a cell is activated, by pressing Enter, Space or double clicking it.                                                                                                   |
+| [onCellActivated](#oncellactivated)                   | Emitted when a cell is activated, such as by pressing Enter, Space, double clicking, or typing.                                                                                     |
 | [onCellClicked](#oncellclicked)                       | Emitted when a cell is clicked.                                                                                                                                                     |
 | [onCellContextMenu](#oncellcontextmenu)               | Emitted when a cell should show a context menu. Usually right click.                                                                                                                |
 | [onColumnMoved](#oncolumnmoved)                       | Emitted when a column has been dragged to a new location.                                                                                                                           |
@@ -1124,7 +1124,7 @@ onCellClicked?: (cell: Item) => void;
 onCellActivated?: (cell: Item) => void;
 ```
 
-`onCellActivated` is called whenever the user double clicks, taps Enter, or taps Space on a cell in the grid.
+`onCellActivated` is called whenever the user double clicks, presses Enter or Space, or begins typing with a cell selected.
 
 ---
 

packages/core/src/data-editor/data-editor.tsx

@@ -3379,6 +3379,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 ) {
                     return;
                 }
+                onCellActivated?.([col - rowMarkerOffset, row]);
                 reselect(event.bounds, true, event.key);
                 event.stopPropagation();
                 event.preventDefault();
@@ -3393,6 +3394,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
             rowMarkerOffset,
             rows,
             showTrailingBlankRow,
+            onCellActivated,
             reselect,
         ]
     );

packages/core/src/docs/examples/cell-activated-event.stories.tsx

@@ -55,8 +55,8 @@ export const CellActivatedEvent: React.VFC<Pick<DataEditorCoreProps, "cellActiva
             description={
                 <>
                     <Description>
-                        When you tap <KeyName>Enter</KeyName>, <KeyName>Space</KeyName> or double click a cell, that
-                        cell is activated. You can track this with <PropName>onCellActivated</PropName>.
+                        When you tap <KeyName>Enter</KeyName>, <KeyName>Space</KeyName>, start typing, or double click a cell,
+                        that cell is activated. You can track this with <PropName>onCellActivated</PropName>.
                     </Description>
                     <MoreInfo>
                         Last activated cell:{" "}

packages/core/test/data-editor.test.tsx

@@ -665,6 +665,33 @@ describe("data-editor", () => {
         expect(spy).toHaveBeenCalledWith([1, 1]);
     });
 
+    test("Emits activated event when typing", async () => {
+        const spy = vi.fn();
+
+        vi.useFakeTimers();
+        render(<DataEditor {...basicProps} onCellActivated={spy} />, {
+            wrapper: Context,
+        });
+        prep(false);
+
+        const canvas = screen.getByTestId("data-grid-canvas");
+        sendClick(canvas, {
+            clientX: 300, // Col B
+            clientY: 36 + 32 + 16, // Row 1 (0 indexed)
+        });
+
+        fireEvent.keyDown(canvas, {
+            key: "A",
+        });
+
+        act(() => {
+            vi.runAllTimers();
+        });
+
+        expect(spy).toHaveBeenCalled();
+        expect(spy).toHaveBeenCalledWith([1, 1]);
+    });
+
     test("keyDown and keyUp events include the cell location", async () => {
         let keyDownEvent: GridKeyEventArgs | undefined;
         let keyUpEvent: GridKeyEventArgs | undefined;