From 1edfd3b887c1d1d0a78c92b6e55192d7739b9a3e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sun, 23 Apr 2023 13:02:17 +0100
Subject: [PATCH] Improve grid keyboard shortcuts and allow sorting by any
 visible field to fix issues with refreshing data when hiding columns

---
 .../src/components/grid/controls/SortButton.svelte   | 12 ++++++------
 .../components/grid/overlays/KeyboardManager.svelte  |  8 ++++++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/SortButton.svelte b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
index fd3bdddf62..26eba050bf 100644
--- a/packages/frontend-core/src/components/grid/controls/SortButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Select } from "@budibase/bbui"
 
-  const { sort, visibleColumns, stickyColumn } = getContext("grid")
+  const { sort, columns, stickyColumn } = getContext("grid")
   const orderOptions = [
     { label: "A-Z", value: "ascending" },
     { label: "Z-A", value: "descending" },
@@ -11,8 +11,8 @@
   let open = false
   let anchor
 
-  $: columnOptions = getColumnOptions($stickyColumn, $visibleColumns)
-  $: checkValidSortColumn($sort.column, $stickyColumn, $visibleColumns)
+  $: columnOptions = getColumnOptions($stickyColumn, $columns)
+  $: checkValidSortColumn($sort.column, $stickyColumn, $columns)
 
   const getColumnOptions = (stickyColumn, columns) => {
     let options = []
@@ -46,13 +46,13 @@
   }
 
   // Ensure we never have a sort column selected that is not visible
-  const checkValidSortColumn = (sortColumn, stickyColumn, visibleColumns) => {
+  const checkValidSortColumn = (sortColumn, stickyColumn, columns) => {
     if (!sortColumn) {
       return
     }
     if (
       sortColumn !== stickyColumn?.name &&
-      !visibleColumns.some(col => col.name === sortColumn)
+      !columns.some(col => col.name === sortColumn)
     ) {
       if (stickyColumn) {
         sort.update(state => ({
@@ -62,7 +62,7 @@
       } else {
         sort.update(state => ({
           ...state,
-          column: visibleColumns[0]?.name,
+          column: columns[0]?.name,
         }))
       }
     }
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index eb034edf2d..c608a62e2a 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -19,7 +19,7 @@
   const handleKeyDown = e => {
     // If nothing selected avoid processing further key presses
     if (!$focusedCellId) {
-      if (e.key === "Tab") {
+      if (e.key === "Tab" || e.key?.startsWith("Arrow")) {
         e.preventDefault()
         focusFirstCell()
       } else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
@@ -35,7 +35,11 @@
       // 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)
+      if (api?.isActive()) {
+        setTimeout(api?.blur, 10)
+      } else {
+        $focusedCellId = null
+      }
       return
     } else if (e.key === "Tab") {
       api?.blur?.()