From e8ddf4e083d32bea26bf4b62f235905f948a7a2e Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 26 Mar 2026 07:33:20 +0000
Subject: [PATCH] [#MUI-24] Fix composant Select (#22)
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é

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/malio-layer-ui/pulls/22
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
---
 app/components/malio/select/Select.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/malio/select/Select.vue b/app/components/malio/select/Select.vue
index a4244b9..6e604d9 100644
--- a/app/components/malio/select/Select.vue
+++ b/app/components/malio/select/Select.vue
@@ -1,8 +1,7 @@
 <template>
   <div
     ref="root"
-    class="relative mt-4 w-full"
-    :class="[minWidth, maxWidth]"
+    :class="mergedGroupClass"
   >
     <button
       :id="buttonId"
@@ -154,6 +153,7 @@
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
 
 defineOptions({name: 'MalioSelect', inheritAttrs: false})
 
@@ -176,6 +176,7 @@ const props = withDefaults(defineProps<{
   textLabel?: string
   rounded?: string
   disabled?: boolean
+  groupClass?: string
 }>(), {
   options: () => [],
   emptyOptionLabel: '',
@@ -190,6 +191,7 @@ const props = withDefaults(defineProps<{
   textLabel: 'text-sm',
   rounded: 'rounded-md',
   disabled: false,
+  groupClass: '',
 })
 
 const emit = defineEmits<{
@@ -208,6 +210,9 @@ const normalizedOptions = computed<Option[]>(() => [
   {label: props.emptyOptionLabel, value: null},
   ...props.options,
 ])
+const mergedGroupClass = computed(() =>
+  twMerge('relative mt-4 w-full', props.minWidth, props.maxWidth, props.groupClass),
+)
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success && !hasError.value)
 const isOptionSelected = computed(() =>
@@ -315,7 +320,6 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
 
 :deep(ul[role="listbox"]) {
   scrollbar-width: auto;
-  scrollbar-gutter: stable;
 }
 
 :deep(.select-scrollbar-primary) {