fix: auto-select bug (#59)

frontend/components/Form/Select.vue

@@ -42,50 +42,31 @@
       default: null,
       required: false,
     },
-    selectFirst: {
-      type: Boolean,
-      default: false,
-    },
   });
 
-  function syncSelect() {
-    if (!props.modelValue) {
-      if (props.selectFirst) {
-        selectedIdx.value = 0;
-      }
-      return;
-    }
-    // Check if we're already synced
-    if (props.value) {
-      if (props.modelValue[props.value] === props.items[selectedIdx.value][props.value]) {
-        return;
-      }
-    } else if (props.modelValue === props.items[selectedIdx.value]) {
-      return;
-    }
+  const selectedIdx = ref(-1);
+  const internalSelected = useVModel(props, "modelValue", emit);
 
-    const idx = props.items.findIndex(item => {
-      if (props.value) {
-        return item[props.value] === props.modelValue;
-      }
-      return item === props.modelValue;
-    });
+  watch(selectedIdx, newVal => {
+    internalSelected.value = props.items[newVal];
+  });
 
-    selectedIdx.value = idx;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function compare(a: any, b: any): boolean {
+    if (props.value != null) {
+      return a[props.value] === b[props.value];
+    }
+    return a === b;
   }
 
-  watch(() => props.items, syncSelect);
-  watch(() => props.modelValue, syncSelect);
-
-  const selectedIdx = ref(0);
   watch(
-    () => selectedIdx.value,
+    internalSelected,
     () => {
-      if (props.value) {
-        emit("update:modelValue", props.items[selectedIdx.value][props.value]);
-        return;
-      }
-      emit("update:modelValue", props.items[selectedIdx.value]);
+      const idx = props.items.findIndex(item => compare(item, internalSelected.value));
+      selectedIdx.value = idx;
+    },
+    {
+      immediate: true,
     }
   );
 </script>

frontend/components/Item/CreateModal.vue

@@ -2,7 +2,7 @@
   <BaseModal v-model="modal">
     <template #title> Create Item </template>
     <form @submit.prevent="create">
-      <FormSelect v-model="form.location" label="Location" :items="locations ?? []" select-first />
+      <FormSelect v-model="form.location" label="Location" :items="locations ?? []" />
       <FormTextField
         ref="locationNameRef"
         v-model="form.name"

frontend/pages/item/[id]/edit.vue

@@ -30,6 +30,13 @@
       return;
     }
 
+    if (locations) {
+      const location = locations.value.find(l => l.id === data.location.id);
+      if (location) {
+        data.location = location;
+      }
+    }
+
     return data;
   });
   onMounted(() => {
@@ -308,7 +315,7 @@
             </template>
           </BaseSectionHeader>
           <div class="px-5 mb-6 grid md:grid-cols-2 gap-4">
-            <FormSelect v-model="item.location" label="Location" :items="locations ?? []" select-first />
+            <FormSelect v-if="item" v-model="item.location" label="Location" :items="locations ?? []" />
             <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
           </div>