From 4e30cf78bb3c2fb570d80fd4ddd150c8259a1ca8 Mon Sep 17 00:00:00 2001
From: ClaraLpresta <clara.laporte@prestashop.com>
Date: Mon, 19 Feb 2024 14:01:58 +0400
Subject: [PATCH] fix: Custom label reactivity corrected

---
 packages/components/select/src/select.vue | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 750eced0..115e6d21 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -14,7 +14,7 @@
       >
         <input
           ref="labelInput"
-          :value="currentLabel"
+          :value="customLabel || currentLabel"
           class="puik-select__selected"
           :autocomplete="autocomplete"
           :placeholder="placeholder"
@@ -113,7 +113,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, ref, useSlots, watch } from 'vue'
+import { computed, provide, ref, useSlots } from 'vue'
 import { Listbox, ListboxButton, ListboxOptions } from '@headlessui/vue'
 import { isObject, isFunction, isArray, slotIsEmpty } from '@puik/utils'
 import { useLocale } from '@puik/hooks'
@@ -142,20 +142,13 @@ const query = ref('')
 const currentLabel = ref()
 
 const selectedValue = computed({
-  get() {
-    return props.modelValue
-  },
-  set(option: any) {
-    currentLabel.value = props.customLabel ?? option.label
-    emit('update:modelValue', option.value)
+  get: () => props.modelValue,
+  set: (option: any) => {
+    currentLabel.value = option.label
+    return emit('update:modelValue', option.value)
   },
 })
 
-watch(
-  () => props.customLabel,
-  () => (currentLabel.value = props.customLabel)
-)
-
 const filteredItems = computed(() => {
   if (props.options) {
     if (query.value) {
@@ -177,7 +170,7 @@ const filteredItems = computed(() => {
 const hasError = computed(() => props.error || slotIsEmpty(slots.error))
 
 const handleAutoComplete = (label: string | number) => {
-  if (label === currentLabel.value) return
+  if (label === props.customLabel || currentLabel.value) return
   if (labelInput.value) {
     labelInput.value.value = ''
   }