Add on-escape handler to search input and let it close the modal

uxmp · Apr 30, 2023 · bf75e31 · bf75e31
1 parent de23946
commit bf75e31
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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)