From 86265a90e0489fba7a53a23e79d2ac4cce295b4d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Jun 2023 15:25:05 +0100
Subject: [PATCH] Only respect keyboard events in grids when the mouse is over
 them

---
 .../frontend-core/src/components/grid/layout/Grid.svelte    | 3 +++
 .../src/components/grid/overlays/KeyboardManager.svelte     | 6 ++++++
 packages/frontend-core/src/components/grid/stores/ui.js     | 2 ++
 3 files changed, 11 insertions(+)

diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 39a67d44eb..3d5bf01bf9 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/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">
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index a210e125ff..c4b7c598cd 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/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) {
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index b62e883437..eeea8fff43 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/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: {