From 6f80e36bef256b98df30a74e18759b1d8878be24 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Fri, 30 Aug 2024 00:05:39 +0200
Subject: [PATCH] fix: Category select field value assignment

---
 src/components/fields/category-select-field.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/category-select-field.vue b/src/components/fields/category-select-field.vue
index ecaab4fc..e8a3c4ef 100644
--- a/src/components/fields/category-select-field.vue
+++ b/src/components/fields/category-select-field.vue
@@ -116,9 +116,9 @@
 
 <script setup lang="ts">
 import { ref, Ref, computed, watch, onBeforeUnmount } from "vue";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-vue-next";
 import { CategoryModel } from "shared-types";
 import { type FormattedCategory } from "@/common/types";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-vue-next";
 import { cn } from "@/lib/utils";
 
 import { InputField, FieldError, FieldLabel } from "@/components/fields";
@@ -150,6 +150,19 @@ const emit = defineEmits<{
 const selectedValue = ref(props.modelValue || props.values[0]);
 const buttonRef = ref<HTMLButtonElement>(null);
 
+watch(
+  () => props.modelValue,
+  (value) => {
+    // Sometimes real value comes with a delay, not immediately. We need to assign it to
+    // selectedValue with a delay. Yet we need to avoid any risks of infinite loop, so we need to
+    // compare IDs to only apply this when values differ
+    if (value.id !== selectedValue.value.id) {
+      selectedValue.value = value;
+    }
+  },
+  { deep: true },
+);
+
 const levelValues = ref(props.values);
 
 const rootCategories = ref(props.values);