From e54ea6661fcd248834bb83b551b4a70258d0f486 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 22 Apr 2023 16:40:00 +0100
Subject: [PATCH] Improve keyboard shortcuts for adding rows

---
 .../grid/cells/AttachmentCell.svelte          |  1 +
 .../src/components/grid/cells/DataCell.svelte |  1 +
 .../components/grid/cells/LongFormCell.svelte |  1 +
 .../components/grid/cells/OptionsCell.svelte  |  1 +
 .../grid/cells/RelationshipCell.svelte        |  1 +
 .../src/components/grid/cells/TextCell.svelte |  1 +
 .../components/grid/layout/NewRowTop.svelte   | 21 +++++++++++--------
 .../grid/overlays/KeyboardManager.svelte      |  5 ++++-
 8 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
index 2eb191e113..4d830723c2 100644
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -72,6 +72,7 @@
     api = {
       focus: () => open(),
       blur: () => close(),
+      isActive: () => isOpen,
       onKeyDown,
     }
   })
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index 8ba25ef31b..f205c0a74a 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -50,6 +50,7 @@
   const cellAPI = {
     focus: () => api?.focus(),
     blur: () => api?.blur(),
+    isActive: () => api?.isActive?.() ?? false,
     onKeyDown: (...params) => api?.onKeyDown(...params),
     isReadonly: () => readonly,
     getType: () => column.schema.type,
diff --git a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
index f41e206d1d..891a19573a 100644
--- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
@@ -43,6 +43,7 @@
     api = {
       focus: () => open(),
       blur: () => close(),
+      isActive: () => isOpen,
       onKeyDown,
     }
   })
diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
index 37c37fcd70..f3b6b9b59d 100644
--- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
@@ -73,6 +73,7 @@
     api = {
       focus: open,
       blur: close,
+      isActive: () => isOpen,
       onKeyDown,
     }
   })
diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
index 08dabe0fec..90182e9983 100644
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@@ -235,6 +235,7 @@
     api = {
       focus: open,
       blur: close,
+      isActive: () => isOpen,
       onKeyDown,
     }
   })
diff --git a/packages/frontend-core/src/components/grid/cells/TextCell.svelte b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
index 73fb83dfbf..533b030b5c 100644
--- a/packages/frontend-core/src/components/grid/cells/TextCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
@@ -33,6 +33,7 @@
     api = {
       focus: () => input?.focus(),
       blur: () => input?.blur(),
+      isActive: () => active,
       onKeyDown,
     }
   })
diff --git a/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte b/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
index c2b9e6da61..8643ca6911 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
@@ -31,6 +31,10 @@
   $: $tableId, (isAdding = false)
 
   const addRow = async () => {
+    // Blur the active cell and tick to let final value updates propagate
+    $focusedCellAPI?.blur()
+    await tick()
+
     // Create row
     const savedRow = await rows.actions.addRow(newRow, 0)
     if (savedRow) {
@@ -65,12 +69,6 @@
     $hoveredRowId = rowId
     if (firstColumn) {
       $focusedCellId = `${rowId}-${firstColumn.name}`
-
-      // Also focus the cell if it is a text-like cell
-      if (["string", "number"].includes(firstColumn.schema.type)) {
-        await tick()
-        $focusedCellAPI?.focus()
-      }
     }
   }
 
@@ -89,8 +87,11 @@
       return
     }
     if (e.key === "Escape") {
-      e.preventDefault()
-      clear()
+      // Only close the new row component if we aren't actively inside a cell
+      if (!$focusedCellAPI?.isActive()) {
+        e.preventDefault()
+        clear()
+      }
     } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault()
       addRow()
@@ -119,7 +120,9 @@
     >
       <GridCell width={GutterWidth} rowFocused>
         <div class="gutter">
-          <div class="number">1</div>
+          <div class="number">
+            <Icon name="Add" />
+          </div>
           {#if $config.allowExpandRows}
             <Icon name="Maximize" size="S" hoverable on:click={addViaModal} />
           {/if}
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index a5cc434e48..4da5cd2c0d 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -30,7 +30,10 @@
     // Always intercept certain key presses
     const api = $focusedCellAPI
     if (e.key === "Escape") {
-      api?.blur?.()
+      // By setting a tiny timeout here we can ensure that other listeners
+      // which depend on being able to read cell state on an escape keypress
+      // get a chance to observe the true state before we blur
+      setTimeout(api?.blur, 10)
     } else if (e.key === "Tab") {
       api?.blur?.()
       changeFocusedColumn(1)