From 4e118d095d54e90dfdb91dd79bd6e101ede6b8a5 Mon Sep 17 00:00:00 2001
From: artoscinote <85488244+artoscinote@users.noreply.github.com>
Date: Mon, 28 Feb 2022 13:21:17 +0100
Subject: [PATCH] Fix dropdown component for group select [SCI-6583] (#3905)

---
 .../vue/shared/dropdown_selector.vue          | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/app/javascript/vue/shared/dropdown_selector.vue b/app/javascript/vue/shared/dropdown_selector.vue
index 7e9e359dd..9c9667bc1 100644
--- a/app/javascript/vue/shared/dropdown_selector.vue
+++ b/app/javascript/vue/shared/dropdown_selector.vue
@@ -7,8 +7,22 @@
             :data-select-multiple-name="dataSelectMultipleName"
             :data-placeholder="placeholder"
     >
-      <optgroup v-if="groupSelector" v-for="group in this.options" :label="group.label">
-        <option v-for="option in group.options"
+      <template v-if="groupSelector">
+        <optgroup v-for="group in this.options" :label="group.label" :key="group.label">
+          <option v-for="option in group.options"
+            :key="option.label"
+            :value="option.value"
+            :selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
+            :data-selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
+            :data-params="JSON.stringify(option.params)"
+            :data-group="group.label">
+            {{ option.label }}
+          </option>
+        </optgroup>
+      </template>
+      <template v-else>
+        <option
+          v-for="option in this.options"
           :key="option.label"
           :value="option.value"
           :selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
@@ -16,16 +30,7 @@
           :data-params="JSON.stringify(option.params)">
           {{ option.label }}
         </option>
-      </optgroup>
-      <option v-if="!groupSelector"
-        v-for="option in this.options"
-        :key="option.label"
-        :value="option.value"
-        :selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
-        :data-selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
-        :data-params="JSON.stringify(option.params)">
-          {{ option.label }}
-      </option>
+      </template>
     </select>
   </div>
 </template>