fix(InputMenu/SelectMenu): prevent unnecessary updates when modelValu…

…e is unchanged (nuxt#2507)
Snack-X · Nov 5, 2024 · 1a94b55 · 1a94b55
1 parent c71fdc8
commit 1a94b55
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue
@@ -91,7 +91,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, toRef, watch, defineComponent } from 'vue'
+import { ref, computed, toRef, watch, defineComponent, toRaw } from 'vue'
 import type { PropType } from 'vue'
 import {
   Combobox as HCombobox,
@@ -436,6 +436,11 @@ export default defineComponent({
 
     function onUpdate(value: any) {
       query.value = ''
+
+      if (toRaw(props.modelValue) === toRaw(value)) {
+        return
+      }
+
       emit('update:modelValue', value)
       emit('change', value)
 

diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, toRef, watch, defineComponent } from 'vue'
+import { ref, computed, toRef, watch, defineComponent, toRaw } from 'vue'
 import type { PropType } from 'vue'
 import {
   Combobox as HCombobox,
@@ -551,6 +551,10 @@ export default defineComponent({
     })
 
     function onUpdate(value: any) {
+      if (toRaw(props.modelValue) === value) {
+        return
+      }
+
       emit('update:modelValue', value)
       emit('change', value)
       emitFormChange()