Fixes splitting search attributes when string

nuxt · Nov 15, 2023 · 14344b0 · 14344b0
1 parent 30d188d
commit 14344b0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
@@ -99,10 +99,6 @@ props:
 ---
 ::
 
-::callout{icon="i-heroicons-light-bulb"}
-Learn how to customize icons from the [Select](/forms/select#icon) component.
-::
-
 #### Search Attributes
 
 Use the `search-attributes` with an array of property names to search on each option object.

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">
@@ -140,7 +140,7 @@ import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
 import { usePopper } from '../../composables/usePopper'
 import { useFormGroup } from '../../composables/useFormGroup'
-import {get, mergeConfig} from '../../utils'
+import { get, mergeConfig } from '../../utils'
 import type { PopperOptions, NestedKeyOf, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -414,7 +414,7 @@ export default defineComponent({
 
       return (props.options as any[]).filter((option: any) => {
         const searchable = typeof props.searchAttributes === 'string'
-          ? props.optionAttribute.split(',').map(attribute => attribute.trim())
+          ? props.searchAttributes.split(',').map(attribute => attribute.trim())
           : props.searchAttributes
 
         return searchable.some((searchAttribute: any) => {