@winchsa/ui 0.1.63 → 0.1.64

package/dist/components/forms/AutocompleteInput.vue

@@ -52,6 +52,7 @@ const emits = defineEmits(["update:model-value"]);
 const defaultOptions = ref(props.options ?? []);
 const displayedOptions = ref(props.options ?? []);
 const loadedValuesHaveBeenSet = ref(false);
+const resolvingMissingValues = ref(false);
 const loading = ref(false);
 const showTeleport = ref(false);
 const search = ref("");
@@ -60,7 +61,7 @@ const errorState = ref(false);
 const isOpen = ref(false);
 const value = computed({
   get() {
-    if (props.trackByValue && !loadedValuesHaveBeenSet.value) {
+    if (props.trackByValue && (!loadedValuesHaveBeenSet.value || resolvingMissingValues.value)) {
       return props.multiple ? [] : null;
     }
     return props.modelValue;
@@ -70,6 +71,8 @@ const value = computed({
   }
 });
 const isLoading = computed(() => props.isLoading || loading.value);
+const hasTrackByValue = computed(() => Array.isArray(props.trackByValue) ? props.trackByValue.length > 0 : !!props.trackByValue);
+const isResolvingSelection = computed(() => hasTrackByValue.value && (!loadedValuesHaveBeenSet.value && loading.value || resolvingMissingValues.value));
 const params = computed(() => buildQueryString(props.params));
 const elementId = computed(() => {
   const attrs = useAttrs();
@@ -114,7 +117,8 @@ const sharedMultiSelectProps = computed(() => ({
   groupLabel: props.groupLabel,
   label: props.itemLabel,
   trackBy: props.trackBy,
-  placeholder: hasValue.value ? "" : internalPlaceholder.value || t("inputs.placeholder_select"),
+  placeholder: hasValue.value || isResolvingSelection.value ? "" : internalPlaceholder.value || t("inputs.placeholder_select"),
+  loading: isResolvingSelection.value,
   showLabels: false,
   clearOnSelect: true,
   showNoOptions: isLoading.value ? false : props.showNoOptions,
@@ -206,9 +210,14 @@ watch([() => props.trackByValue, defaultOptions], async ([trackByValue, _default
     (value2) => !items.some((item) => item?.[props.trackBy] == value2)
   );
   if (missingIds.length > 0 && props.url) {
-    const fetchedItems = await Promise.all(missingIds.map((id) => getRecords(id)));
-    if (fetchedItems.length > 0) {
-      items = items.concat(fetchedItems.flat());
+    resolvingMissingValues.value = true;
+    try {
+      const fetchedItems = await Promise.all(missingIds.map((id) => getRecords(id)));
+      if (fetchedItems.length > 0) {
+        items = items.concat(fetchedItems.flat());
+      }
+    } finally {
+      resolvingMissingValues.value = false;
     }
   }
   const optionsToSelect = loadedValues.map((value2) => items.find((item) => item?.[props.trackBy] == value2)).filter(Boolean);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@winchsa/ui",
-    "version": "0.1.63",
+    "version": "0.1.64",
     "type": "module",
     "private": false,
     "publishConfig": {