From c0986eb2ee924f0743ee873d275b260076b71c1d Mon Sep 17 00:00:00 2001
From: Johnathan Clementi <johnathan.clementi1@gmail.com>
Date: Tue, 31 Dec 2024 15:29:20 -0500
Subject: [PATCH] Update uri ref for select component reactivity #147

---
 .../components/generic/ReferenceDatatype.vue      |  2 +-
 .../ReferenceDatatypeEditor.vue                   | 15 +++++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
index 9ed5350e..37ab76b3 100644
--- a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
@@ -15,7 +15,7 @@ defineProps<{
     options?: ControlledListItem[];
 }>();
 const emits = defineEmits(["update"]);
-const onUpdate = (val: ControlledListItem) => {
+const onUpdate = (val: ControlledListItem[]) => {
     emits("update", val);
 };
 </script>
diff --git a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
index 6a240ee9..2ad48a33 100644
--- a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, toRef } from "vue";
+import { computed, inject, ref } from "vue";
 import Select from "primevue/select";
 
 import { systemLanguageKey } from "@/arches_lingo/constants.ts";
@@ -21,16 +21,15 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(["update"]);
-const valRef = toRef(props?.value?.[0]?.uri); // use uri as value
+const uriRef = ref(props?.value?.[0]?.uri); // unwrap array n=1 && use uri as value
 const val = computed({
     get() {
-        return valRef.value; // unwrap array n=1
+        return uriRef.value;
     },
-    set(value) {
-        // const item = props.options?.find((item) => item.uri === value);
-        console.log(value);
-        // emit("update", [item]); // rewrap array n=1
-        emit("update", value);
+    set(newVal) {
+        uriRef.value = newVal; // update uri
+        const item = props.options?.find((item) => item.uri === newVal);
+        emit("update", item ? [item] : []); // emit the updated value as a list item
     },
 });