Fix datagrid editing and add tests

Signed-off-by: Andrew Stein <steinlink@gmail.com>

Author: texodus

packages/perspective-viewer-datagrid/src/js/event_handlers/header_click.js

@@ -30,7 +30,6 @@ export async function mousedown_listener(regularTable, viewer, event) {
         }
     }
 
-    event.preventDefault();
     if (target.classList.contains("psp-tree-label")) {
         expandCollapseHandler.call(this, regularTable, event);
         return;

packages/perspective-viewer-datagrid/test/js/superstore.spec.js

@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { test } from "@finos/perspective-test";
+import { shadow_type, test } from "@finos/perspective-test";
 import {
     compareContentsToSnapshot,
     run_standard_tests,
@@ -120,6 +120,91 @@ test.describe("Datagrid with superstore data set", () => {
             "a-filtered-to-empty-dataset-with-group-by-and-split-by-does-not-error-internally.txt"
         );
     });
+
+    test("An editable datagrid is editable through mouse interaction", async ({
+        page,
+    }) => {
+        await page.goto("/tools/perspective-test/src/html/basic-test.html");
+        await page.evaluate(async () => {
+            while (!window["__TEST_PERSPECTIVE_READY__"]) {
+                await new Promise((x) => setTimeout(x, 10));
+            }
+        });
+
+        await page.evaluate(async () => {
+            await document.querySelector("perspective-viewer").restore({
+                plugin: "Datagrid",
+                plugin_config: {
+                    edit_mode: "EDIT",
+                },
+                columns: ["State", "City", "Customer ID"],
+            });
+        });
+
+        await shadow_type(
+            page,
+            "Test",
+            false,
+            "perspective-viewer-datagrid",
+            "table",
+            "tbody",
+            "tr",
+            "td"
+        );
+
+        const result = await page.evaluate(async () => {
+            const view = await document
+                .querySelector("perspective-viewer")
+                .getView();
+            const json = await view.to_json_string({ end_row: 4 });
+            return json;
+        });
+
+        test.expect(result).toEqual(
+            '[{"State":"Test","City":"Henderson","Customer ID":"CG-12520"},{"State":"Kentucky","City":"Henderson","Customer ID":"CG-12520"},{"State":"California","City":"Los Angeles","Customer ID":"DV-13045"},{"State":"Florida","City":"Fort Lauderdale","Customer ID":"SO-20335"}]'
+        );
+    });
+
+    test("An editable datagrid gets contenteditable focus when a cell is clicked", async ({
+        page,
+    }) => {
+        await page.goto("/tools/perspective-test/src/html/basic-test.html");
+        await page.evaluate(async () => {
+            while (!window["__TEST_PERSPECTIVE_READY__"]) {
+                await new Promise((x) => setTimeout(x, 10));
+            }
+        });
+
+        const td = await page.evaluateHandle(async () => {
+            await document.querySelector("perspective-viewer").restore({
+                plugin: "Datagrid",
+                plugin_config: {
+                    edit_mode: "EDIT",
+                },
+                columns: ["State", "City", "Customer ID"],
+            });
+
+            return document
+                .querySelector("perspective-viewer-datagrid")
+                .shadowRoot.querySelector("table tbody tr td");
+        });
+
+        await td.click();
+        await td.asElement().fill("Test");
+        await page.evaluate(() => document.activeElement.blur());
+
+        const result = await page.evaluate(async () => {
+            const view = await document
+                .querySelector("perspective-viewer")
+                .getView();
+            const json = await view.to_json_string({ end_row: 4 });
+            return json;
+        });
+
+        test.expect(result).toEqual(
+            '[{"State":"Test","City":"Henderson","Customer ID":"CG-12520"},{"State":"Kentucky","City":"Henderson","Customer ID":"CG-12520"},{"State":"California","City":"Los Angeles","Customer ID":"DV-13045"},{"State":"Florida","City":"Fort Lauderdale","Customer ID":"SO-20335"}]'
+        );
+    });
 });
 
 test.describe("Datagrid with superstore arrow data set", () => {

tools/perspective-test/src/js/utils.ts

@@ -287,14 +287,25 @@ export async function shadow_type(
                 while (content.length > 0) {
                     if (elem instanceof HTMLInputElement) {
                         elem.value += content[0];
+                    } else if (
+                        elem instanceof HTMLElement &&
+                        elem.hasAttribute("contenteditable")
+                    ) {
+                        elem.textContent = content;
                     }
+
                     triggerInputEvent(elem);
                     await new Promise(requestAnimationFrame);
                     content = content.slice(1);
                 }
             } else {
                 if (elem instanceof HTMLInputElement) {
                     elem.value = content;
+                } else if (
+                    elem instanceof HTMLElement &&
+                    elem.hasAttribute("contenteditable")
+                ) {
+                    elem.textContent = content;
                 }
 
                 triggerInputEvent(elem);
@@ -310,6 +321,9 @@ export async function shadow_type(
                     elem.dispatchEvent(event);
                 }
             }
+
+            // @ts-ignore
+            document.activeElement.blur();
         },
         { content, path, is_incremental }
     );