From 8d837038cf76bf227a37925b1be1bc1ac538b083 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 23 May 2024 13:17:09 +0100
Subject: [PATCH] Disable grid keyboard handling while certain popovers are
 open

---
 .../frontend-core/src/components/grid/cells/HeaderCell.svelte | 2 ++
 .../src/components/grid/layout/NewColumnButton.svelte         | 4 +++-
 .../src/components/grid/layout/StickyColumn.svelte            | 2 +-
 .../src/components/grid/overlays/KeyboardManager.svelte       | 3 ++-
 packages/frontend-core/src/components/grid/stores/ui.js       | 2 ++
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 29c28ab9fb..c999bf6006 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -29,6 +29,7 @@
     focusedCellId,
     filter,
     inlineFilters,
+    keyboardBlocked,
   } = getContext("grid")
 
   const searchableTypes = [
@@ -58,6 +59,7 @@
   $: debouncedUpdateFilter(searchValue)
   $: orderable = !column.primaryDisplay
   $: editable = $config.canEditColumns && !column.schema.disabled
+  $: keyboardBlocked.set(open)
 
   const close = () => {
     open = false
diff --git a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
index de68dea644..e02dced983 100644
--- a/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewColumnButton.svelte
@@ -3,7 +3,8 @@
   import { Icon } from "@budibase/bbui"
   import GridPopover from "../overlays/GridPopover.svelte"
 
-  const { visibleColumns, scroll, width, subscribe, ui } = getContext("grid")
+  const { visibleColumns, scroll, width, subscribe, ui, keyboardBlocked } =
+    getContext("grid")
 
   let anchor
   let isOpen = false
@@ -14,6 +15,7 @@
   )
   $: end = columnsWidth - 1 - $scroll.left
   $: left = Math.min($width - 40, end)
+  $: keyboardBlocked.set(isOpen)
 
   const open = () => {
     ui.actions.blur()
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index b5cf3dbe59..b57c89ee4f 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -66,7 +66,7 @@
 
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
+  <div class="content">
     <GridScrollWrapper scrollVertically attachHandlers>
       {#each $renderedRows as row, idx}
         {@const rowSelected = !!$selectedRows[row._id]}
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index 78cb186f29..ced78c0fe0 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -17,6 +17,7 @@
     config,
     menu,
     gridFocused,
+    keyboardBlocked,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -29,7 +30,7 @@
   // Global key listener which intercepts all key events
   const handleKeyDown = e => {
     // Ignore completely if the grid is not focused
-    if (!$gridFocused) {
+    if (!$gridFocused || $keyboardBlocked) {
       return
     }
 
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index 3fc0f77a86..6f7541e642 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -19,6 +19,7 @@ export const createStores = context => {
   const previousFocusedRowId = writable(null)
   const previousFocusedCellId = writable(null)
   const gridFocused = writable(false)
+  const keyboardBlocked = writable(false)
   const isDragging = writable(false)
   const buttonColumnWidth = writable(0)
 
@@ -54,6 +55,7 @@ export const createStores = context => {
     hoveredRowId,
     rowHeight,
     gridFocused,
+    keyboardBlocked,
     isDragging,
     buttonColumnWidth,
     selectedRows: {