fix(InputMenu/SelectMenu): invalid label with value-attribute and async search

Resolves #1780

Author: benjamincanac

src/runtime/components/forms/InputMenu.vue

@@ -309,7 +309,7 @@ export default defineComponent({
       }
 
       if (props.valueAttribute) {
-        const option = props.options.find(option => option[props.valueAttribute] === props.modelValue)
+        const option = options.value.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]
@@ -391,16 +391,22 @@ export default defineComponent({
 
     const debouncedSearch = props.search && typeof props.search === 'function' ? useDebounceFn(props.search, props.debounce) : undefined
 
-    const filteredOptions = computedAsync(async () => {
-      if (debouncedSearch) {
+    const options = computedAsync(async () => {
+      if (props.search && debouncedSearch) {
         return await debouncedSearch(query.value)
       }
 
-      if (query.value === '') {
-        return props.options
+      return props.options || []
+    }, [], {
+      lazy: props.searchLazy
+    })
+
+    const filteredOptions = computed(() => {
+      if (!query.value) {
+        return options.value
       }
 
-      return (props.options as any[]).filter((option: any) => {
+      return options.value.filter((option: any) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => {
           if (['string', 'number'].includes(typeof option)) {
             return String(option).search(new RegExp(query.value, 'i')) !== -1
@@ -411,8 +417,6 @@ export default defineComponent({
           return child !== null && child !== undefined && String(child).search(new RegExp(query.value, 'i')) !== -1
         })
       })
-    }, [], {
-      lazy: props.searchLazy
     })
 
     watch(container, (value) => {

src/runtime/components/forms/SelectMenu.vue

@@ -368,7 +368,7 @@ export default defineComponent({
         }
       } else if (props.modelValue !== undefined && props.modelValue !== null) {
         if (props.valueAttribute) {
-          const option = props.options.find(option => option[props.valueAttribute] === props.modelValue)
+          const option = options.value.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]
@@ -452,18 +452,24 @@ export default defineComponent({
       )
     })
 
-    const debouncedSearch = typeof props.searchable === 'function' ? useDebounceFn(props.searchable, props.debounce) : undefined
+    const debouncedSearch = props.searchable && typeof props.searchable === 'function' ? useDebounceFn(props.searchable, props.debounce) : undefined
 
-    const filteredOptions = computedAsync(async () => {
+    const options = computedAsync(async () => {
       if (props.searchable && debouncedSearch) {
         return await debouncedSearch(query.value)
       }
 
-      if (query.value === '') {
-        return props.options
+      return props.options || []
+    }, [], {
+      lazy: props.searchableLazy
+    })
+
+    const filteredOptions = computed(() => {
+      if (!query.value) {
+        return options.value
       }
 
-      return (props.options as any[]).filter((option: any) => {
+      return options.value.filter((option: any) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute: any) => {
           if (['string', 'number'].includes(typeof option)) {
             return String(option).search(new RegExp(query.value, 'i')) !== -1
@@ -474,8 +480,6 @@ export default defineComponent({
           return child !== null && child !== undefined && String(child).search(new RegExp(query.value, 'i')) !== -1
         })
       })
-    }, [], {
-      lazy: props.searchableLazy
     })
 
     const createOption = computed(() => {