Skip to content

Commit

Permalink
add explicit event listeners to prevent modal closing from selects
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmedhamidawan committed Jul 22, 2024
1 parent 394cc0a commit f6fcc6e
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 2 deletions.
18 changes: 17 additions & 1 deletion client/src/components/Upload/UploadModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { setIframeEvents } from "components/Upload/utils";
import { useConfig } from "composables/config";
import { useUserHistories } from "composables/userHistories";
import { storeToRefs } from "pinia";
import { ref, watch } from "vue";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { useUserStore } from "@/stores/userStore";
import { wait } from "@/utils/utils";
Expand Down Expand Up @@ -68,10 +68,26 @@ watch(
defineExpose({
open,
});
// Handle escape key press in modal
// (modal stays open when esc key is pressed in some child components, hence using `no-close-on-esc`)
const uploadModal = ref(null);
onMounted(() => {
uploadModal.value?.$el.addEventListener("keyup", handleKeyUp);
});
onBeforeUnmount(() => {
uploadModal.value?.$el.removeEventListener("keyup", handleKeyUp);
});
function handleKeyUp(event) {
if (event.key === "Escape") {
dismiss();
}
}
</script>
<template>
<BModal
ref="uploadModal"
v-model="showModal"
:static="options.modalStatic"
header-class="no-separator"
Expand Down
17 changes: 16 additions & 1 deletion client/src/components/Upload/UploadSelect.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup>
import { computed } from "vue";
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import Multiselect from "vue-multiselect";
import { uid } from "@/utils/utils";
Expand Down Expand Up @@ -47,11 +47,26 @@ const currentValue = computed({
emit("input", newValue.id);
},
});
// prevent the escape key closing behavior from the Upload Modal
const multiSelectRef = ref(null);
onMounted(() => {
multiSelectRef.value?.$el.addEventListener("keyup", handleKeyUp);
});
onBeforeUnmount(() => {
multiSelectRef.value?.$el.removeEventListener("keyup", handleKeyUp);
});
function handleKeyUp(event) {
if (event.key === "Escape") {
event.stopImmediatePropagation();
}
}
</script>
<template>
<Multiselect
:id="id"
ref="multiSelectRef"
v-model="currentValue"
class="upload-settings-select rounded"
deselect-label=""
Expand Down

0 comments on commit f6fcc6e

Please sign in to comment.