fix(InputMenu/SelectMenu): prevent unnecessary updates when modelValue is unchanged (#2507)

Author: ersankarimi

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)
 

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()