fix(InputMenu): take option-attribute into account to display label

Author: benjamincanac

docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue

@@ -13,14 +13,14 @@ const people = [{
   name: 'Tom Cook'
 }]
 
-const selected = ref(people[0].name)
+const selected = ref(people[0].id)
 </script>
 
 <template>
   <UInputMenu
     v-model="selected"
     :options="people"
-    value-attribute="name"
+    value-attribute="id"
     option-attribute="name"
   />
 </template>

src/runtime/components/forms/InputMenu.vue

@@ -19,7 +19,7 @@
         :class="inputClass"
         autocomplete="off"
         v-bind="attrs"
-        :display-value="() => query ? query : ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute]"
+        :display-value="() => query ? query : label"
         @change="onChange"
       />
 
@@ -293,6 +293,15 @@ export default defineComponent({
       }
     })
 
+    const label = computed(() => {
+      if (props.valueAttribute) {
+        const option = props.options.find(option => option[props.valueAttribute] === props.modelValue)
+        return option ? option[props.optionAttribute] : null
+      } else {
+        return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute]
+      }
+    })
+
     const inputClass = computed(() => {
       const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
@@ -423,6 +432,7 @@ export default defineComponent({
       popper,
       trigger,
       container,
+      label,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys