From 20b7bb3c99328ef0ec7e0f5188607ef5d4020a55 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone@data.gouv.fr>
Date: Mon, 19 Jun 2023 03:16:31 +0200
Subject: [PATCH] Fix error with inital select state

---
 src/login/i18n/i18n.tsx                          |  6 ++++--
 src/login/pages/shared/UserProfileFormFields.tsx | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/login/i18n/i18n.tsx b/src/login/i18n/i18n.tsx
index 8601fa73..c65dba20 100644
--- a/src/login/i18n/i18n.tsx
+++ b/src/login/i18n/i18n.tsx
@@ -211,7 +211,8 @@ const keycloakifyExtraMessages = {
         "shouldBeDifferent": "{0} should be different to {1}",
         "shouldMatchPattern": "Pattern should match: `/{0}/`",
         "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option"
+        "notAValidOption": "Not a valid option",
+        "selectAnOption": "Select an option"
     },
     "fr": {
         /* spell-checker: disable */
@@ -223,7 +224,8 @@ const keycloakifyExtraMessages = {
 
         "logoutConfirmTitle": "Déconnexion",
         "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
-        "doLogout": "Se déconnecter"
+        "doLogout": "Se déconnecter",
+        "selectAnOption": "Sélectionner une option"
         /* spell-checker: enable */
     }
 };
diff --git a/src/login/pages/shared/UserProfileFormFields.tsx b/src/login/pages/shared/UserProfileFormFields.tsx
index 3b2b7a4d..0431aca8 100644
--- a/src/login/pages/shared/UserProfileFormFields.tsx
+++ b/src/login/pages/shared/UserProfileFormFields.tsx
@@ -17,7 +17,7 @@ export type UserProfileFormFieldsProps = {
 export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
     const { kcContext, onIsFormSubmittableValueChange, i18n, getClassName, BeforeField, AfterField } = props;
 
-    const { advancedMsg } = i18n;
+    const { advancedMsg, msg } = i18n;
 
     const {
         formValidationState: { fieldStateByAttributeName, isFormSubmittable },
@@ -98,11 +98,16 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
                                                 }
                                                 value={value}
                                             >
-                                                {options.options.map(option => (
-                                                    <option key={option} value={option}>
-                                                        {option}
+                                                <>
+                                                    <option value="" selected disabled hidden>
+                                                        {msg("selectAnOption")}
                                                     </option>
-                                                ))}
+                                                    {options.options.map(option => (
+                                                        <option key={option} value={option}>
+                                                            {option}
+                                                        </option>
+                                                    ))}
+                                                </>
                                             </select>
                                         );
                                     }