Back to original prop type.

nuxt · Nov 21, 2023 · 86f0a45 · 86f0a45
1 parent f477b65
commit 86f0a45
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 12 deletions.
diff --git a/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue b/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue
@@ -23,7 +23,7 @@ const selected = ref(options[1])
     :search-attributes="['name', 'favoriteColors']"
   >
     <template #option="{ option: person }">
-      <span v-for="color in person.favoriteColors" class="h-2 w-2 rounded-full mr-2" :class="`bg-${color}-500`" />
+      <span v-for="color in person.favoriteColors" :key="color.id" class="h-2 w-2 rounded-full mr-2" :class="`bg-${color}-500`" />
       <span class="truncate">{{ person.name }}</span>
     </template>
   </USelectMenu>

diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
@@ -101,9 +101,9 @@ props:
 
 #### Search Attributes
 
-Use the `search-attributes` with an array of property names, or a list separated by comma, to search on each option object.
+Use the `search-attributes` with an array of property names to search on each option object.
 
-Nested attributes can be accessed using `dot.notation`. Array and objects attributes are cast to string before search.
+Nested attributes can be accessed using `dot.notation`. When the property value is an arra or object, these are cast to string so these can be searched within.
 
 :component-example{component="select-menu-example-search-attributes" :componentProps='{"class": "w-full lg:w-96"}'}
 

diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
@@ -86,17 +86,17 @@
                       aria-hidden="true"
                     />
                     <span v-else-if="option.chip" :class="uiMenu.option.chip.base" :style="{ background: `#${option.chip}` }" />
-  
+
                     <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : option[optionAttribute] }}</span>
                   </slot>
                 </div>
-  
+
                 <span v-if="selected" :class="[uiMenu.option.selectedIcon.wrapper, uiMenu.option.selectedIcon.padding]">
                   <UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" />
                 </span>
               </li>
             </component>
-  
+
             <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                 <div :class="uiMenu.option.container">
@@ -288,7 +288,7 @@ export default defineComponent({
       default: null
     },
     searchAttributes: {
-      type: [Array<String>, String],
+      type: Array<String>,
       default: null
     },
     popper: {
@@ -413,11 +413,7 @@ export default defineComponent({
       }
 
       return (props.options as any[]).filter((option: any) => {
-        const searchable = typeof props.searchAttributes === 'string'
-          ? props.searchAttributes.split(',').map(attribute => attribute.trim())
-          : props.searchAttributes
-
-        return searchable.some((searchAttribute: 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
           }