Enforce unique ids for multiselect fields

guerler · Aug 11, 2023 · 4569ebf · 4569ebf
1 parent dce14f7
commit 4569ebf
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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()