diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 87ecd98f4928..2322b9b17ab8 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/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(() => {
{
+
{
/** 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]));
}