From 93c155dd2fd4695ce8f634e6c7dbdc6cc787b78b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 29 Sep 2023 09:46:50 +0200
Subject: [PATCH] fix(quick actions): always open quick actions with hotkey,
 even if other inputs are focused

Resolves https://kolaente.dev/vikunja/frontend/issues/3743
---
 src/components/home/TheNavigation.vue    | 10 ++----
 src/components/misc/OpenQuickActions.vue | 41 ++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 src/components/misc/OpenQuickActions.vue

diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 2621adc4d..ed2ebbf98 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -27,10 +27,7 @@
 		</div>
 
 		<div class="navbar-end">
-			<BaseButton @click="openQuickActions" class="trigger-button" v-shortcut="'Control+k'"
-				:title="$t('keyboardShortcuts.quickSearch')">
-				<icon icon="search" />
-			</BaseButton>
+			<OpenQuickActions/>
 			<Notifications />
 			<dropdown>
 				<template #trigger="{ toggleOpen, open }">
@@ -80,6 +77,7 @@ import Notifications from '@/components/notifications/notifications.vue'
 import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
+import OpenQuickActions from '@/components/misc/OpenQuickActions.vue'
 
 import { getProjectTitle } from '@/helpers/getProjectTitle'
 
@@ -98,10 +96,6 @@ const authStore = useAuthStore()
 const configStore = useConfigStore()
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
 const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
-
-function openQuickActions() {
-	baseStore.setQuickActionsActive(true)
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/misc/OpenQuickActions.vue b/src/components/misc/OpenQuickActions.vue
new file mode 100644
index 000000000..1d305c94c
--- /dev/null
+++ b/src/components/misc/OpenQuickActions.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import BaseButton from '@/components/base/BaseButton.vue'
+import {useBaseStore} from '@/stores/base'
+import {onBeforeUnmount, onMounted} from 'vue'
+import {eventToHotkeyString} from '@github/hotkey'
+
+const baseStore = useBaseStore()
+const GLOBAL_HOTKEY = 'Control+k'
+
+// See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
+function openQuickActionsViaHotkey(event) {
+	const hotkeyString = eventToHotkeyString(event)
+	if (!hotkeyString) return
+	if (hotkeyString !== GLOBAL_HOTKEY) return
+	event.preventDefault()
+
+	openQuickActions()
+}
+
+onMounted(() => {
+	document.addEventListener('keydown', openQuickActionsViaHotkey)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', openQuickActionsViaHotkey)
+})
+
+function openQuickActions() {
+	baseStore.setQuickActionsActive(true)
+}
+</script>
+
+<template>
+	<BaseButton
+		@click="openQuickActions"
+		class="trigger-button"
+		:title="$t('keyboardShortcuts.quickSearch')"
+	>
+		<icon icon="search"/>
+	</BaseButton>
+</template>