From e449a4d86ab44bd063f8f4de7c0cea739b0765f9 Mon Sep 17 00:00:00 2001
From: Benjamin Dehli <superelg@gmail.com>
Date: Fri, 3 May 2024 00:24:32 +0200
Subject: [PATCH] Add helper text support for default select list component

---
 src/components/Template/DefaultSelectList.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Template/DefaultSelectList.jsx b/src/components/Template/DefaultSelectList.jsx
index ef104dd..abff148 100644
--- a/src/components/Template/DefaultSelectList.jsx
+++ b/src/components/Template/DefaultSelectList.jsx
@@ -36,6 +36,7 @@ export function DefaultSelectList({
     const labelWithFallback = label || capitalizeFirstLetter(name);
     const idWithFallback = id || name;
     const helperTextId = `${idWithFallback}-helper-text`;
+    const hasHelperText = !!helperText?.length;
 
     return (
         <FormControl margin="dense" fullWidth variant="outlined">
@@ -52,7 +53,7 @@ export function DefaultSelectList({
                 label={labelWithFallback}
                 input={<OutlinedInput label="Glide mode" />}
                 endAdornment={
-                    helperText?.length && (
+                    hasHelperText && (
                         <InputAdornment position="end">
                             <IconButton
                                 aria-label="toggle password visibility"
@@ -65,6 +66,11 @@ export function DefaultSelectList({
                         </InputAdornment>
                     )
                 }
+                sx={{
+                    "& .MuiSelect-icon": hasHelperText && {
+                        marginRight: 5
+                    }
+                }}
             >
                 {options.map((option) => (
                     <MenuItem
@@ -81,7 +87,7 @@ export function DefaultSelectList({
                     </MenuItem>
                 ))}
             </Select>
-            {helperText?.length && (
+            {hasHelperText && (
                 <Collapse in={showHelperText}>
                     <FormHelperText id={helperTextId}>{helperText}</FormHelperText>
                 </Collapse>