From 1894058e823b93b76ed920f00a21de4ed0dae821 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?= <stan@stormier.ninja>
Date: Thu, 31 Oct 2024 13:44:34 +0100
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=8E=A8=20am=C3=A9liore=20le=20co?=
 =?UTF-8?q?de=20de=20DsfrMultiselect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DsfrMultiselect/DsfrMultiselect.spec.ts    |  1 +
 .../DsfrMultiselect/DsfrMultiselect.vue        | 18 ++++++++++--------
 .../docs-demo/DsfrMultiselectDemoComplexe.vue  |  1 +
 .../docs-demo/DsfrMultiselectDemoSimple.vue    |  1 +
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/DsfrMultiselect/DsfrMultiselect.spec.ts b/src/components/DsfrMultiselect/DsfrMultiselect.spec.ts
index c57dbe4e..36786d79 100644
--- a/src/components/DsfrMultiselect/DsfrMultiselect.spec.ts
+++ b/src/components/DsfrMultiselect/DsfrMultiselect.spec.ts
@@ -1,4 +1,5 @@
 import { fireEvent, render } from '@testing-library/vue'
+
 import DsfrMultiselect from './DsfrMultiselect.vue'
 
 describe('DsfrMultiselect', () => {
diff --git a/src/components/DsfrMultiselect/DsfrMultiselect.vue b/src/components/DsfrMultiselect/DsfrMultiselect.vue
index 89bdb3f4..3a77d482 100644
--- a/src/components/DsfrMultiselect/DsfrMultiselect.vue
+++ b/src/components/DsfrMultiselect/DsfrMultiselect.vue
@@ -1,15 +1,16 @@
 <script lang="ts" setup generic="T extends Object | string | number">
-import { getRandomId } from '@/utils/random-utils'
 import { computed, onUnmounted, ref } from 'vue'
 
 import { useCollapsable } from '../../composables'
 import DsfrButton from '../DsfrButton/DsfrButton.vue'
 import DsfrCheckbox from '../DsfrCheckbox/DsfrCheckbox.vue'
 import DsfrFieldset from '../DsfrFieldset/DsfrFieldset.vue'
-
 import DsfrInput from '../DsfrInput/DsfrInput.vue'
+
 import type { DsfrMultiSelectProps, DsfrMultiSelectSlots } from './DsfrMultiselect.types'
 
+import { getRandomId } from '@/utils/random-utils'
+
 const props = withDefaults(
   defineProps<DsfrMultiSelectProps<T>>(),
   {
@@ -285,10 +286,13 @@ onUnmounted(() => {
 
 const defaultButtonLabel = computed(() => {
   const nbElements = model.value?.length
-  if (nbElements === 0) {
+  const noElements = nbElements === 0
+  const severalElements = nbElements > 1
+
+  if (noElements) {
     return 'Sélectionner une option'
   }
-  return `${nbElements} option${nbElements > 1 ? 's' : ''} sélectionnée${nbElements > 1 ? 's' : ''}`
+  return `${nbElements} option${severalElements ? 's' : ''} sélectionnée${severalElements ? 's' : ''}`
 })
 
 const finalLabelClass = computed(() => [
@@ -507,14 +511,12 @@ const finalLabelClass = computed(() => [
 }
 
 .fr-multiselect__collapse {
-  z-index: 20000;
+  z-index: 1;
   position: absolute;
   transform-origin: left top;
   width: var(--width-host);
-  left: var(--left-position);
-  top: var(--top-position);
   padding: 1rem;
-  margin-top: 4px;
+  margin-top: 0.25rem;
   background-color: var(--background-overlap-grey);
   filter: drop-shadow(var(--overlap-shadow));
 }
diff --git a/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoComplexe.vue b/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoComplexe.vue
index b8cc4f4d..0eca419a 100644
--- a/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoComplexe.vue
+++ b/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoComplexe.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+
 import DsfrMultiselect from '../DsfrMultiselect.vue'
 
 const options = [
diff --git a/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoSimple.vue b/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoSimple.vue
index d427e326..8f59b5fe 100644
--- a/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoSimple.vue
+++ b/src/components/DsfrMultiselect/docs-demo/DsfrMultiselectDemoSimple.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+
 import DsfrMultiselect from '../DsfrMultiselect.vue'
 
 const options = [