From 58236884ddf4531ed3ce7f441c665d2f6e9030f8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 12 Jun 2025 13:34:19 +0200
Subject: [PATCH] fix: close modals by pressing escape (#932)

---
 frontend/src/components/misc/Modal.vue | 28 +++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index 2572b1eab..f4abd0e24 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -68,7 +68,7 @@
 <script lang="ts" setup>
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import {ref, useAttrs, watchEffect} from 'vue'
+import {ref, useAttrs, watchEffect, onBeforeUnmount, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
 const props = withDefaults(defineProps<{
@@ -85,7 +85,7 @@ const props = withDefaults(defineProps<{
 	variant: 'default',
 })
 
-defineEmits(['close', 'submit'])
+const emit = defineEmits(['close', 'submit'])
 
 defineOptions({
 	inheritAttrs: false,
@@ -97,7 +97,29 @@ const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)
 
 watchEffect(() => {
-	scrollLock.value = props.enabled
+        scrollLock.value = props.enabled
+})
+
+function onKeydown(e: KeyboardEvent) {
+	if (e.key === 'Escape') {
+ 		emit('close')
+	}
+}
+
+watch(
+	() => props.enabled,
+	(value: boolean) => {
+ 		if (value) {
+			window.addEventListener('keydown', onKeydown)
+		} else {
+			window.removeEventListener('keydown', onKeydown)
+		}
+	},
+	{immediate: true},
+)
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', onKeydown)
 })
 </script>