From d1ae1871c031482223881bf39a9e7f72c4d4b6b8 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martinmckeaveney@gmail.com>
Date: Fri, 24 Mar 2023 16:32:41 +0000
Subject: [PATCH] allow arrow key navigation in the components panel

---
 .../[componentId]/new/_components/NewComponentPanel.svelte   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
index 033881c0ac..092e429515 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@@ -182,12 +182,13 @@
   }
 
   const handleKeyDown = e => {
-    if (e.key === "Tab") {
+    if (e.key === "Tab" || e.key === "ArrowDown" || e.key === "ArrowUp") {
       // Cycle selected components on tab press
       if (selectedIndex == null) {
         selectedIndex = 0
       } else {
-        selectedIndex = (selectedIndex + 1) % componentList.length
+        const direction = e.key === "ArrowUp" ? -1 : 1
+        selectedIndex = (selectedIndex + direction) % componentList.length
       }
       e.preventDefault()
       e.stopPropagation()