fix(Select): trailing set as false

playgrounds/nuxt/app/pages/components/select-menu.vue

@@ -82,6 +82,7 @@ const valueMultiple = ref([fruits[0]!, vegetables[0]!])
     />
     <USelectMenu placeholder="Highlight" highlight :items="items" v-bind="props" />
     <USelectMenu placeholder="Disabled" disabled :items="items" v-bind="props" />
+    <USelectMenu placeholder="Disabled and trailing false" disabled :items="items" :trailing="false" v-bind="props" />
     <USelectMenu placeholder="Required" required :items="items" v-bind="props" />
     <USelectMenu placeholder="Search..." icon="i-lucide-search" :items="items" v-bind="props" />
     <USelectMenu placeholder="Search..." trailing-icon="i-lucide-search" :items="items" v-bind="props" />

playgrounds/nuxt/app/pages/components/select.vue

@@ -78,6 +78,7 @@ const valueMultiple = ref([fruits[0]!, vegetables[0]!])
     <USelect :default-value="valueMultiple" multiple placeholder="Multiple" :items="items" v-bind="props" />
     <USelect placeholder="Highlight" highlight :items="items" v-bind="props" />
     <USelect placeholder="Disabled" disabled :items="items" v-bind="props" />
+    <USelect placeholder="Disabled and trailing false" disabled :items="items" :trailing="false" v-bind="props" />
     <USelect placeholder="Required" required :items="items" v-bind="props" />
     <USelect placeholder="Search..." icon="i-lucide-search" :items="items" v-bind="props" />
     <USelect placeholder="Search..." trailing-icon="i-lucide-search" :items="items" v-bind="props" />

src/runtime/components/Select.vue

@@ -171,7 +171,8 @@ const props = withDefaults(defineProps<SelectProps<T, VK, M, Mod>>(), {
   labelKey: 'label',
   descriptionKey: 'description',
   portal: true,
-  autofocusDelay: 0
+  autofocusDelay: 0,
+  trailing: undefined
 })
 const emits = defineEmits<SelectEmits<T, VK, M, Mod>>()
 const slots = defineSlots<SelectSlots<T, VK, M, Mod>>()
@@ -186,7 +187,8 @@ const arrowProps = toRef(() => defu(props.arrow, { rounded: true }) as SelectArr
 
 const { emitFormChange, emitFormInput, emitFormBlur, emitFormFocus, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
 const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
+const { isLeading, isTrailing: isTrailingFromComponentIcons, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
+const isTrailing = computed(() => props.trailing === false ? false : isTrailingFromComponentIcons.value)
 
 const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value)
 

src/runtime/components/SelectMenu.vue

@@ -257,7 +257,8 @@ const props = withDefaults(defineProps<SelectMenuProps<T, VK, M, Mod, C>>(), {
   resetSearchTermOnSelect: true,
   resetModelValueOnClear: true,
   autofocusDelay: 0,
-  virtualize: false
+  virtualize: false,
+  trailing: undefined
 })
 const emits = defineEmits<SelectMenuEmits<T, VK, M, Mod, C>>()
 const slots = defineSlots<SelectMenuSlots<T, VK, M, Mod, C>>()
@@ -285,7 +286,8 @@ const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t('s
 
 const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
 const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
+const { isLeading, isTrailing: isTrailingFromComponentIcons, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
+const isTrailing = computed(() => props.trailing === false ? false : isTrailingFromComponentIcons.value)
 
 const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value)
 

test/components/Select.spec.ts

@@ -300,4 +300,33 @@ describe('Select', () => {
       })).toEqualTypeOf<[string | number]>()
     })
   })
+
+  describe('trailing prop', () => {
+    test('hides trailing chevron when trailing is false (e.g. disabled select without arrow)', () => {
+      const wrapper = mount(Select, {
+        props: {
+          ...props,
+          disabled: true,
+          trailing: false
+        }
+      })
+
+      expect(wrapper.find('[data-slot="trailingIcon"]').exists()).toBe(false)
+    })
+
+    test.each([
+      ['trailing prop is omitted', {}],
+      ['trailing is true', { trailing: true }]
+    ])('shows trailing chevron when %s', (_, trailingProps) => {
+      const wrapper = mount(Select, {
+        props: {
+          ...props,
+          disabled: true,
+          ...trailingProps
+        }
+      })
+
+      expect(wrapper.find('[data-slot="trailingIcon"]').exists()).toBe(true)
+    })
+  })
 })

test/components/SelectMenu.spec.ts

@@ -337,4 +337,33 @@ describe('SelectMenu', () => {
       })).toEqualTypeOf<[(string | number)[]]>()
     })
   })
+
+  describe('trailing prop', () => {
+    test('hides trailing chevron when trailing is false (e.g. disabled select without arrow)', () => {
+      const wrapper = mount(SelectMenu, {
+        props: {
+          ...props,
+          disabled: true,
+          trailing: false
+        }
+      })
+
+      expect(wrapper.find('[data-slot="trailingIcon"]').exists()).toBe(false)
+    })
+
+    test.each([
+      ['trailing prop is omitted', {}],
+      ['trailing is true', { trailing: true }]
+    ])('shows trailing chevron when %s', (_, trailingProps) => {
+      const wrapper = mount(SelectMenu, {
+        props: {
+          ...props,
+          disabled: true,
+          ...trailingProps
+        }
+      })
+
+      expect(wrapper.find('[data-slot="trailingIcon"]').exists()).toBe(true)
+    })
+  })
 })