fix(select) : option vide rendue uniquement si emptyOptionLabel non vide

This commit is contained in:
2026-04-24 10:30:58 +02:00
parent 0ddae4dd70
commit da3a4cb349
2 changed files with 40 additions and 5 deletions

View File

@@ -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: {

View File

@@ -208,10 +208,10 @@ const buttonId = `custom-select-btn-${uid}`
const listboxId = `custom-select-listbox-${uid}`
const listRef = ref<HTMLElement | null>(null)
const listHeight = ref(0)
const normalizedOptions = computed<Option[]>(() => [
{label: props.emptyOptionLabel, value: null},
...props.options,
])
const normalizedOptions = computed<Option[]>(() => {
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),
)