From c05c7b5f1e6a2a23196bab36de7b45e0bc5d0d0e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 5 Sep 2022 12:28:01 +0100 Subject: [PATCH 1/2] 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(() => { From e1282c5da34a577c4d4575c88bf3a777711849e0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 5 Sep 2022 14:55:17 +0100 Subject: [PATCH 2/2] Add missing await statement --- .../_components/navigation/ComponentKeyHandler.svelte | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 77147d0f9a..b6bd4286d6 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 @@ -92,7 +92,12 @@ return } // Key events are always for the selected component - return handleKeyAction(e, $selectedComponent, e.key, e.ctrlKey || e.metaKey) + return await handleKeyAction( + e, + $selectedComponent, + e.key, + e.ctrlKey || e.metaKey + ) } const handleComponentMenu = async e => {