add explicit event listeners to prevent modal closing from selects

client/src/components/Upload/UploadModal.vue

@@ -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";
@@ -69,10 +69,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"

client/src/components/Upload/UploadSelect.vue

@@ -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";
@@ -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=""