diff --git a/playgrounds/nuxt/app/pages/components/select-menu.vue b/playgrounds/nuxt/app/pages/components/select-menu.vue index 237daa1d94..334e7c9c18 100644 --- a/playgrounds/nuxt/app/pages/components/select-menu.vue +++ b/playgrounds/nuxt/app/pages/components/select-menu.vue @@ -82,6 +82,7 @@ const valueMultiple = ref([fruits[0]!, vegetables[0]!]) /> + diff --git a/playgrounds/nuxt/app/pages/components/select.vue b/playgrounds/nuxt/app/pages/components/select.vue index fd59891f2c..2bbfa03f3a 100644 --- a/playgrounds/nuxt/app/pages/components/select.vue +++ b/playgrounds/nuxt/app/pages/components/select.vue @@ -78,6 +78,7 @@ const valueMultiple = ref([fruits[0]!, vegetables[0]!]) + diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue index 68a615e5b2..186cd4deb8 100644 --- a/src/runtime/components/Select.vue +++ b/src/runtime/components/Select.vue @@ -171,7 +171,8 @@ const props = withDefaults(defineProps>(), { labelKey: 'label', descriptionKey: 'description', portal: true, - autofocusDelay: 0 + autofocusDelay: 0, + trailing: undefined }) const emits = defineEmits>() const slots = defineSlots>() @@ -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(props) const { orientation, size: fieldGroupSize } = useFieldGroup(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) diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index f1995ae087..d81caef929 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -257,7 +257,8 @@ const props = withDefaults(defineProps>(), { resetSearchTermOnSelect: true, resetModelValueOnClear: true, autofocusDelay: 0, - virtualize: false + virtualize: false, + trailing: undefined }) const emits = defineEmits>() const slots = defineSlots>() @@ -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(props) const { orientation, size: fieldGroupSize } = useFieldGroup(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) diff --git a/test/components/Select.spec.ts b/test/components/Select.spec.ts index 77b0399ba4..0cfabe0aa7 100644 --- a/test/components/Select.spec.ts +++ b/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) + }) + }) }) diff --git a/test/components/SelectMenu.spec.ts b/test/components/SelectMenu.spec.ts index f66272b680..921a5ecb1e 100644 --- a/test/components/SelectMenu.spec.ts +++ b/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) + }) + }) })