Skip to content

Commit

Permalink
fix(ux): add Escape listener on Modal
Browse files Browse the repository at this point in the history
  • Loading branch information
18alantom committed Oct 17, 2022
1 parent 90c8516 commit 795df3e
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 4 deletions.
30 changes: 27 additions & 3 deletions src/components/Modal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,38 @@
</div>
</template>

<script>
export default {
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
openModal: {
default: false,
type: Boolean,
},
setCloseListener: {
default: true,
type: Boolean,
},
},
emits: ['closemodal'],
};
watch: {
openModal(value: boolean) {
if (value) {
document.addEventListener('keyup', this.escapeEventListener);
} else {
document.removeEventListener('keyup', this.escapeEventListener);
}
},
},
methods: {
escapeEventListener(event: KeyboardEvent) {
if (event.code !== 'Escape') {
return;
}
this.$emit('closemodal');
},
},
});
</script>
2 changes: 1 addition & 1 deletion src/components/SearchBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</div>

<!-- Search Modal -->
<Modal :open-modal="openModal" @closemodal="close">
<Modal :open-modal="openModal" @closemodal="close" :set-close-listener="false">
<!-- Search Input -->
<div class="p-1">
<input
Expand Down

0 comments on commit 795df3e

Please sign in to comment.