From 6d5858650ed797958b774164208dece9867fb81e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 1 Jul 2024 12:05:07 -0500
Subject: [PATCH 1/3] make `UploadModal` no-close-on-esc to allow escape events
 on multiselects

Fixes https://github.com/galaxyproject/galaxy/issues/18440
---
 client/src/components/Upload/UploadModal.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
index 762abcc9afc0..3db34f3bec4d 100644
--- a/client/src/components/Upload/UploadModal.vue
+++ b/client/src/components/Upload/UploadModal.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { BModal } from "bootstrap-vue";
 import { setIframeEvents } from "components/Upload/utils";
 import { useConfig } from "composables/config";
 import { useUserHistories } from "composables/userHistories";
@@ -71,13 +72,14 @@ defineExpose({
 </script>
 
 <template>
-    <b-modal
+    <BModal
         v-model="showModal"
         :static="options.modalStatic"
         header-class="no-separator"
         modal-class="ui-modal"
         dialog-class="upload-dialog"
         body-class="upload-dialog-body"
+        no-close-on-esc
         no-enforce-focus
         hide-footer>
         <template v-slot:modal-header>
@@ -90,7 +92,7 @@ defineExpose({
             :current-history-id="currentHistoryId"
             v-bind="options"
             @dismiss="dismiss" />
-    </b-modal>
+    </BModal>
 </template>
 
 <style>

From 394cc0ab1b8e17800357f8eeb3646baa3952eef1 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 1 Jul 2024 12:10:01 -0500
Subject: [PATCH 2/3] remove (hover) title from `UploadContainer`

The `title` create a tooltip on hover for anywhere in the `UploadContainer` saying "Upload from Disk or Web"
---
 client/src/components/Upload/DefaultBox.vue  | 2 ++
 client/src/components/Upload/UploadModal.vue | 3 +--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Upload/DefaultBox.vue b/client/src/components/Upload/DefaultBox.vue
index 5182b087a306..6ebfe5b66ddd 100644
--- a/client/src/components/Upload/DefaultBox.vue
+++ b/client/src/components/Upload/DefaultBox.vue
@@ -389,6 +389,7 @@ defineExpose({
             <UploadSelect
                 v-if="isCollection"
                 class="upload-footer-collection-type"
+                title="Select Type"
                 :value="collectionType"
                 :disabled="isRunning"
                 :options="COLLECTION_TYPES"
@@ -406,6 +407,7 @@ defineExpose({
             <span class="upload-footer-title">Reference (set all):</span>
             <UploadSelect
                 class="upload-footer-genome"
+                title="Select Reference"
                 :value="dbKey"
                 :disabled="isRunning"
                 :options="listDbKeys"
diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
index 3db34f3bec4d..30e1ed261734 100644
--- a/client/src/components/Upload/UploadModal.vue
+++ b/client/src/components/Upload/UploadModal.vue
@@ -18,7 +18,6 @@ const { config, isConfigLoaded } = useConfig();
 
 function getDefaultOptions() {
     const baseOptions = {
-        title: "Upload from Disk or Web",
         modalStatic: true,
         callback: null,
         immediateUpload: false,
@@ -83,7 +82,7 @@ defineExpose({
         no-enforce-focus
         hide-footer>
         <template v-slot:modal-header>
-            <h2 class="title h-sm" tabindex="0">{{ options.title }}</h2>
+            <h2 v-localize class="title h-sm" tabindex="0">Upload from Disk or Web</h2>
         </template>
         <UploadContainer
             v-if="currentHistoryId"

From f6fcc6edbeeb01d23ce33c0ceb9a239f545bdab2 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 22 Jul 2024 11:54:47 -0500
Subject: [PATCH 3/3] add explicit event listeners to prevent modal closing
 from selects

---
 client/src/components/Upload/UploadModal.vue  | 18 +++++++++++++++++-
 client/src/components/Upload/UploadSelect.vue | 17 ++++++++++++++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
index 30e1ed261734..5da48c2f5a2e 100644
--- a/client/src/components/Upload/UploadModal.vue
+++ b/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";
@@ -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"
diff --git a/client/src/components/Upload/UploadSelect.vue b/client/src/components/Upload/UploadSelect.vue
index 847fc160f4d0..31ab01b8b761 100644
--- a/client/src/components/Upload/UploadSelect.vue
+++ b/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=""