From 2059556ffeddebe0a470405fd8d22b2c4dd67792 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 27 Apr 2026 12:59:18 +0000
Subject: [PATCH] fix: option vide rendue uniquement si emptyOptionLabel non
 vide (#36)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: https://gitea.malio.fr/MALIO-DEV/malio-layer-ui/pulls/36
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
---
 app/components/malio/select/Select.test.ts | 37 +++++++++++++++++++++-
 app/components/malio/select/Select.vue     |  8 ++---
 2 files changed, 40 insertions(+), 5 deletions(-)

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<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),
 )