From: Adam Dullage <redacted>
Date: Wed, 8 May 2024 18:59:08 +0000 (+0100)
Subject: Fix escape to close on modals
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=3dcc0d4c998821d591cc31df626d4ddd7582e49f;p=flatnotes.git

Fix escape to close on modals
---

diff --git a/client/components/Modal.vue b/client/components/Modal.vue
index 7b7234b..a094d5c 100644
--- 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 739e257..e8a2b55 100644
--- 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 aa5f5f9..34756cf 100644
--- 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();
   }