Only respect keyboard events in grids when the mouse is over them

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -80,6 +80,7 @@
     loading,
     rowHeight,
     contentLines,
+    gridFocused,
   } = context
 
   // Keep stores up to date
@@ -116,6 +117,8 @@
   class:is-reordering={$isReordering}
   class:stripe={$config.stripeRows}
   style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
+  on:mouseenter={() => gridFocused.set(true)}
+  on:mouseleave={() => gridFocused.set(false)}
 >
   {#if showControls}
     <div class="controls">

packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte

@@ -15,6 +15,7 @@
     selectedRows,
     config,
     menu,
+    gridFocused,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -24,6 +25,11 @@
 
   // Global key listener which intercepts all key events
   const handleKeyDown = e => {
+    // Ignore completely if the grid is not focused
+    if (!$gridFocused) {
+      return
+    }
+
     // Avoid processing events sourced from certain origins
     if (e.target?.closest) {
       for (let selector of ignoredOriginSelectors) {

packages/frontend-core/src/components/grid/stores/ui.js

@@ -15,6 +15,7 @@ export const createStores = () => {
   const hoveredRowId = writable(null)
   const rowHeight = writable(DefaultRowHeight)
   const previousFocusedRowId = writable(null)
+  const gridFocused = writable(false)
 
   // Derive the current focused row ID
   const focusedRowId = derived(
@@ -46,6 +47,7 @@ export const createStores = () => {
     previousFocusedRowId,
     hoveredRowId,
     rowHeight,
+    gridFocused,
     selectedRows: {
       ...selectedRows,
       actions: {