diff --git a/app/components/malio/select/Select.test.ts b/app/components/malio/select/Select.test.ts index 67deae8..f1baa00 100644 --- a/app/components/malio/select/Select.test.ts +++ b/app/components/malio/select/Select.test.ts @@ -88,11 +88,46 @@ describe('MalioSelect', () => { }) await wrapper.get('button').trigger('click') - await wrapper.findAll('li')[2].trigger('click') + await wrapper.findAll('li')[1].trigger('click') expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be']) }) + it('does not render empty option when emptyOptionLabel is empty', async () => { + const wrapper = mount(SelectForTest, { + props: { + modelValue: null, + options: [ + {label: 'AM', value: 'am'}, + {label: 'PM', value: 'pm'}, + ], + }, + }) + + await wrapper.get('button').trigger('click') + + const items = wrapper.findAll('li[role="option"]') + expect(items).toHaveLength(2) + expect(items[0].text()).toBe('AM') + expect(items[1].text()).toBe('PM') + }) + + it('renders empty option when emptyOptionLabel is provided', async () => { + const wrapper = mount(SelectForTest, { + props: { + modelValue: null, + options: [{label: 'AM', value: 'am'}], + emptyOptionLabel: 'Choisir...', + }, + }) + + await wrapper.get('button').trigger('click') + + const items = wrapper.findAll('li[role="option"]') + expect(items).toHaveLength(2) + expect(items[0].text()).toBe('Choisir...') + }) + it('renders the empty option with muted text style', async () => { const wrapper = mount(SelectForTest, { props: { diff --git a/app/components/malio/select/Select.vue b/app/components/malio/select/Select.vue index 518ce69..98a356b 100644 --- a/app/components/malio/select/Select.vue +++ b/app/components/malio/select/Select.vue @@ -208,10 +208,10 @@ const buttonId = `custom-select-btn-${uid}` const listboxId = `custom-select-listbox-${uid}` const listRef = ref(null) const listHeight = ref(0) -const normalizedOptions = computed(() => [ - {label: props.emptyOptionLabel, value: null}, - ...props.options, -]) +const normalizedOptions = computed(() => { + if (!props.emptyOptionLabel) return props.options + return [{label: props.emptyOptionLabel, value: null}, ...props.options] +}) const mergedGroupClass = computed(() => twMerge('relative w-full', props.minWidth, props.maxWidth, props.groupClass), )