Improve keyboard shortcuts for adding rows

packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte

@@ -72,6 +72,7 @@
     api = {
       focus: () => open(),
       blur: () => close(),
+      isActive: () => isOpen,
       onKeyDown,
     }
   })

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,

packages/frontend-core/src/components/grid/cells/LongFormCell.svelte

@@ -43,6 +43,7 @@
     api = {
       focus: () => open(),
       blur: () => close(),
+      isActive: () => isOpen,
       onKeyDown,
     }
   })

packages/frontend-core/src/components/grid/cells/OptionsCell.svelte

@@ -73,6 +73,7 @@
     api = {
       focus: open,
       blur: close,
+      isActive: () => isOpen,
       onKeyDown,
     }
   })

packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte

@@ -235,6 +235,7 @@
     api = {
       focus: open,
       blur: close,
+      isActive: () => isOpen,
       onKeyDown,
     }
   })

packages/frontend-core/src/components/grid/cells/TextCell.svelte

@@ -33,6 +33,7 @@
     api = {
       focus: () => input?.focus(),
       blur: () => input?.blur(),
+      isActive: () => active,
       onKeyDown,
     }
   })

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}

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)