fix: prevent modelValue update on initial render

LUI-UI · Jul 22, 2024 · 4e9c50e · 4e9c50e
1 parent 7550655
commit 4e9c50e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/packages/vue/src/components/MultiSelect/LuiMultiSelect.vue b/packages/vue/src/components/MultiSelect/LuiMultiSelect.vue
@@ -563,7 +563,7 @@ function setInitialSelectedOption() {
     return
 
   selectedOptions.value = parseModelValue(initialOption)
-  emit('update:modelValue', parseModelValue(initialOption))
+  // emit('update:modelValue', parseModelValue(initialOption))
 }
 function handleSearchState() {
   if (!optionsActive.value)

diff --git a/packages/vue/src/components/Select/LuiSelect.stories.ts b/packages/vue/src/components/Select/LuiSelect.stories.ts
@@ -422,7 +422,7 @@ export const Change: Story = {
     components: { LuiSelect },
     setup() {
       const selectedName = ref('')
-      const consoleLog = () => console.warn('selectedName: ', selectedName)
+      const consoleLog = (e: any) => console.warn('selectedName: ', e)
       return { selectedName, consoleLog }
     },
     template: changeTemplate,

diff --git a/packages/vue/src/components/Select/LuiSelect.vue b/packages/vue/src/components/Select/LuiSelect.vue
@@ -250,6 +250,9 @@ function focusAvailableElement(
   })
 }
 function updateSelectedOption(option: ModelValue) {
+  if (isFirstUpdate)
+    isFirstUpdate = false
+
   if (option === undefined)
     return
   const optionText = typeof option !== 'string' ? option.text : option
@@ -267,11 +270,11 @@ function updateSelectedOption(option: ModelValue) {
       typeof i !== 'string' ? i.text === optionText : i === optionText,
     )
   }
-  emit('update:modelValue', optionValue)
-  if (!isFirstUpdate)
+
+  if (!isFirstUpdate) {
     emit('change', optionValue)
-  if (isFirstUpdate)
-    isFirstUpdate = false
+    emit('update:modelValue', optionValue)
+  }
 }
 
 function focusButton() {