From bf75e315dcdb5310b57ba0298db7e9b3cc518b42 Mon Sep 17 00:00:00 2001
From: Daniel Jakob <github@usox.org>
Date: Sun, 30 Apr 2023 12:24:42 +0200
Subject: [PATCH] Add on-escape handler to search input and let it close the
 modal

---
 package-lock.json                    | 26 +++++++++++++-------------
 src/components/Lib/Modal.vue         | 22 +++++++++++-----------
 src/components/Navigation/Search.vue | 11 ++++++++++-
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3f224bc..f054d21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,9 +39,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.19.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
+      "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -57,9 +57,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
-      "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.5.tgz",
+      "integrity": "sha512-J+IxH2IsxV4HbnTrSWgMAQj0UEo61hDA4Ny8h8PCX0MLXiibqHbqIOVneqdocemSBc22VpBKxt4J6FQzy9HarQ==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -68,12 +68,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
-      "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.5.tgz",
+      "integrity": "sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.19.4",
+        "@babel/helper-string-parser": "^7.21.5",
         "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       },
@@ -1218,9 +1218,9 @@
       "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
     },
     "node_modules/rollup": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
-      "integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
+      "version": "3.21.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.2.tgz",
+      "integrity": "sha512-c4vC+JZ3bbF4Kqq2TtM7zSKtSyMybFOjqmomFax3xpfYaPZDZ4iz8NMIuBRMjnXOcKYozw7bC6vhJjiWD6JpzQ==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
diff --git a/src/components/Lib/Modal.vue b/src/components/Lib/Modal.vue
index 34e9dfb..390c4cd 100644
--- a/src/components/Lib/Modal.vue
+++ b/src/components/Lib/Modal.vue
@@ -1,14 +1,3 @@
-<script lang="ts">
-  export default {
-    name: 'Modal',
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
-  };
-</script>
-
 <template>
   <div class="modal-backdrop">
     <div class="modal">
@@ -37,6 +26,17 @@
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'Modal',
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
 <style>
   .modal-backdrop {
     position: fixed;
diff --git a/src/components/Navigation/Search.vue b/src/components/Navigation/Search.vue
index 07d088a..5bbf333 100644
--- a/src/components/Navigation/Search.vue
+++ b/src/components/Navigation/Search.vue
@@ -6,7 +6,15 @@
 
     <Modal v-show="isVisible" @close="closeModal">
         <template v-slot:header>
-            {{ $t("header.search") }}: {{ this.searchQuery }}
+            {{ $t("header.search") }}:
+            <input
+                type="text"
+                ref="modalSearchInput"
+                :placeholder="$t('header.search')"
+                v-model="searchQuery"
+                @keyup="search"
+                v-on:keydown.esc="closeModal"
+            />
         </template>
 
         <template v-slot:body>
@@ -78,6 +86,7 @@ export default defineComponent({
         return
       }
 
+      this.$refs.modalSearchInput.focus()
       this.searchState = true;
 
       await this.retrieveResult(this.searchQuery)