From c05c7b5f1e6a2a23196bab36de7b45e0bc5d0d0e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Sep 2022 12:28:01 +0100
Subject: [PATCH] Prevent default browser events from firing when using
 keyboard shortcuts

---
 .../_components/navigation/ComponentKeyHandler.svelte    | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
index 467d9a5a2f..77147d0f9a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
@@ -54,7 +54,7 @@
     },
   }
 
-  const handleKeyAction = async (component, key, ctrlKey = false) => {
+  const handleKeyAction = async (event, component, key, ctrlKey = false) => {
     if (!component || !key) {
       return false
     }
@@ -70,6 +70,9 @@
       const handler = keyHandlers[key]
       if (!handler) {
         return false
+      } else if (event) {
+        event.preventDefault()
+        event.stopPropagation()
       }
       return handler(component)
     } catch (error) {
@@ -89,14 +92,14 @@
       return
     }
     // Key events are always for the selected component
-    return handleKeyAction($selectedComponent, e.key, e.ctrlKey || e.metaKey)
+    return handleKeyAction(e, $selectedComponent, e.key, e.ctrlKey || e.metaKey)
   }
 
   const handleComponentMenu = async e => {
     // Menu events can be for any component
     const { id, key, ctrlKey } = e.detail
     const component = findComponent($selectedScreen.props, id)
-    return await handleKeyAction(component, key, ctrlKey)
+    return await handleKeyAction(null, component, key, ctrlKey)
   }
 
   onMount(() => {