From 4569ebf5fe10efd4cbd68391dc7a9466cf8d3b37 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 11 Aug 2023 13:47:02 +0200
Subject: [PATCH] Enforce unique ids for multiselect fields

---
 .../components/Form/Elements/FormSelect.vue   |  4 +++
 .../Upload/UploadSettingsSelect.vue           | 27 ++++++++++++++++---
 .../selenium/test_library_contents.py         |  3 +--
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 0883247ac7e9..73782749de61 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -3,6 +3,7 @@ import { computed, type ComputedRef, onMounted, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useMultiselect } from "@/composables/useMultiselect";
+import { uid } from "@/utils/utils";
 
 type SelectValue = string | number | null;
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
@@ -14,12 +15,14 @@ interface SelectOption {
 
 const props = withDefaults(
     defineProps<{
+        id?: string;
         multiple?: boolean;
         optional?: boolean;
         options: Array<[string, SelectValue]>;
         value?: Array<SelectValue> | string | number;
     }>(),
     {
+        id: `form-select-${uid()}`,
         multiple: false,
         optional: false,
         value: null,
@@ -143,6 +146,7 @@ onMounted(() => {
 <template>
     <Multiselect
         v-if="hasOptions"
+        :id="id"
         v-model="currentValue"
         :allow-empty="true"
         :class="['form-select', cls]"
diff --git a/client/src/components/Upload/UploadSettingsSelect.vue b/client/src/components/Upload/UploadSettingsSelect.vue
index 070d34184d00..3b935532acf8 100644
--- a/client/src/components/Upload/UploadSettingsSelect.vue
+++ b/client/src/components/Upload/UploadSettingsSelect.vue
@@ -2,11 +2,29 @@
 import { computed } from "vue";
 import Multiselect from "vue-multiselect";
 
+import { uid } from "@/utils/utils";
+
 const props = defineProps({
-    disabled: Boolean,
-    options: Array,
-    placeholder: String,
-    value: String,
+    id: {
+        type: String,
+        default: `upload-settings-select-${uid()}`,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Array,
+        required: true,
+    },
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    value: {
+        type: String,
+        default: null,
+    },
 });
 
 const emit = defineEmits(["input"]);
@@ -21,6 +39,7 @@ const currentValue = computed({
 
 <template>
     <Multiselect
+        :id="id"
         v-model="currentValue"
         class="upload-settings-select rounded"
         deselect-label=""
diff --git a/lib/galaxy_test/selenium/test_library_contents.py b/lib/galaxy_test/selenium/test_library_contents.py
index ed92184281f9..15ac5d9fc7d7 100644
--- a/lib/galaxy_test/selenium/test_library_contents.py
+++ b/lib/galaxy_test/selenium/test_library_contents.py
@@ -106,8 +106,7 @@ def test_delete_dataset(self):
         self.test_import_dataset_from_history()
 
         self.sleep_for(self.wait_types.UX_RENDER)
-        # assert "you must select at least one" modal
-        assert self.components.libraries.folder.toast_msg.is_displayed
+        self.components.libraries.folder.toast_msg.wait_for_visible()
 
         self.components.libraries.folder.delete_btn.wait_for_and_click()