fix: handle show group name

src/components/shared/select/select.ts

@@ -35,7 +35,13 @@ export const createSelect = <T extends Record<string, any>>(
   let previousSearch = '';
 
   watch(value, (v) => {
-    if (!v || (cache && cache.find((opt) => opt[valueField] === v))) return;
+    if (!v) return;
+
+    if (cache && cache.find((opt) => opt[valueField] === v)) {
+      valueOption.value = cache.find((opt) => opt[valueField] === v);
+      return;
+    }
+
     getSelectedOption();
   });
 
@@ -63,7 +69,15 @@ export const createSelect = <T extends Record<string, any>>(
     const currentValue = value.value;
 
     if (!currentValue) return;
-    if (selectOptions.value.find((v) => v[valueField] === currentValue)) return;
+
+    const option = selectOptions.value.find(
+      (v) => v[valueField] === currentValue,
+    );
+
+    if (option) {
+      valueOption.value = option;
+      return;
+    }
     if (valueOption.value && valueOption.value[valueField] === currentValue) {
       return selectOptions.value.unshift(valueOption.value);
     }

src/pages/05_quotation/QuotationFormProductSelect.vue

@@ -51,6 +51,8 @@ const emit = defineEmits<{
 const selectedProductGroup = defineModel<string>('selectedProductGroup', {
   default: '',
 });
+
+const selectedProductGroupOption = ref<ProductGroup | undefined>();
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
 const productGroup = defineModel<ProductGroup[]>('productGroup', {
@@ -569,14 +571,18 @@ watch(
                             {{
                               productGroup.find(
                                 (g) => g.id === selectedProductGroup,
-                              )?.name || '-'
+                              )?.name ||
+                              selectedProductGroupOption?.name ||
+                              '-'
                             }}
                           </span>
                           <span class="text-caption app-text-muted">
                             {{
                               productGroup.find(
                                 (g) => g.id === selectedProductGroup,
-                              )?.code || '-'
+                              )?.code ||
+                              selectedProductGroupOption?.code ||
+                              '-'
                             }}
                           </span>
                         </div>
@@ -862,13 +868,13 @@ watch(
               <span class="q-pr-sm">
                 {{ $t('productService.group.title') }}
               </span>
-
               <SelectProductGroup
                 class="col-md-4 col-12"
                 :class="{ 'q-mb-sm': $q.screen.lt.md }"
                 id="product-group-select"
                 clearable
                 v-model:value="selectedProductGroup"
+                v-model:value-option="selectedProductGroupOption"
                 :placeholder="
                   !selectedProductGroup
                     ? $t('general.select', {