Fix escape to close on modals

diff --git a/client/components/Modal.vue b/client/components/Modal.vue
index 7b7234bdb67b43b7f123f57f7c98948d8051f87d..a094d5c96400077ca4ef7138dca8964cfdfbefa2 100644 (file)
--- a/client/components/Modal.vue
+++ b/client/components/Modal.vue
@@ -25,6 +25,7 @@
 
 <script setup>
 import { mdiWindowClose } from "@mdi/js";
+import Mousetrap from "mousetrap";
 
 import CustomButton from "./CustomButton.vue";
 
@@ -38,6 +39,13 @@ const props = defineProps({
 });
 const isVisible = defineModel({ type: Boolean });
 
+// 'escape' to close
+Mousetrap.bind("esc", () => {
+  if (isVisible.value) {
+    closeHandler();
+  }
+});
+
 function closeHandler() {
   if (props.closeHandlerOverride) {
     props.closeHandlerOverride();

diff --git a/client/partials/SearchModal.vue b/client/partials/SearchModal.vue
index 739e257186eae016a585d9c0b79b12ff12aba12c..e8a2b55a5a6a3ade116e4f3b306b25c5dee87971 100644 (file)
--- a/client/partials/SearchModal.vue
+++ b/client/partials/SearchModal.vue
@@ -1,6 +1,11 @@
 <template>
   <Modal v-model="isVisible" title="Search">
-    <SearchInput @search="toggleHandler" class="mb-4" hidePlaceholder />
+    <SearchInput
+      @search="toggleHandler"
+      @keyup.esc="toggleHandler"
+      class="mb-4"
+      hidePlaceholder
+    />
     <div class="flex justify-end">
       <CustomButton label="Close" @click="toggleHandler" />
     </div>

diff --git a/client/views/Note.vue b/client/views/Note.vue
index aa5f5f93c62a91c18aefc541e24aeae6261b9508..34756cf5e9898f1fa817d6f22dda9ded9153edb5 100644 (file)
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -109,7 +109,7 @@ const toast = useToast();
 const toastEditor = ref();
 
 // 'e' to edit
-Mousetrap.bind("e", function () {
+Mousetrap.bind("e", () => {
   if (editMode.value === false) {
     editHandler();
   }