Use the new column-select component in FormData for multiple select

This allows for easier multiselect with added ease for range select.
Fixes #17947

client/src/components/Form/Elements/FormData/FormData.vue

@@ -14,6 +14,7 @@ import { orList } from "@/utils/strings";
 import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
 
+import FormSelection from "../FormSelection.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 library.add(faCopy, faFile, faFolder, faCaretDown, faCaretUp, faExclamation, faLink, faUnlink);
@@ -502,7 +503,7 @@ const noOptionsWarningMessage = computed(() => {
         </div>
 
         <FormSelect
-            v-if="currentVariant"
+            v-if="currentVariant && !currentVariant.multiple"
             v-model="currentValue"
             class="align-self-start"
             :multiple="currentVariant.multiple"
@@ -515,6 +516,12 @@ const noOptionsWarningMessage = computed(() => {
                 </BAlert>
             </template>
         </FormSelect>
+        <FormSelection
+            v-else-if="currentVariant?.multiple"
+            v-model="currentValue"
+            :data="formattedOptions"
+            optional
+            multiple />
 
         <template v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox

client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue

@@ -65,7 +65,7 @@ const searchRegex = computed(() => {
 /** Wraps value prop so it can be set, and always returns an array */
 const selected = computed({
     get() {
-        return Array.isArray(props.value) ? props.value : [props.value];
+        return props.value === null ? [] : Array.isArray(props.value) ? props.value : [props.value];
     },
     set(value) {
         emit("input", value);
@@ -142,7 +142,15 @@ async function deselectOption(event: MouseEvent, index: number) {
         const [option] = selectedOptionsFiltered.value.splice(index, 1);
 
         if (option) {
-            const i = selected.value.indexOf(option.value);
+            const i = selected.value.findIndex((selectedValue) => {
+                if (typeof selectedValue === "string") {
+                    return selectedValue === option.value;
+                } else if (typeof selectedValue === "object" && typeof option.value === "object") {
+                    // in case values are objects, compare their ids (if they have the 'id' property)
+                    return selectedValue?.id === option.value?.id;
+                }
+                return false;
+            });
             selected.value = selected.value.flatMap((value, index) => (index === i ? [] : [value]));
         }