Fix error with inital select state

This commit is contained in:
garronej
2023-06-19 03:16:31 +02:00
parent 3defc16658
commit 20b7bb3c99
2 changed files with 14 additions and 7 deletions

View File

@ -211,7 +211,8 @@ const keycloakifyExtraMessages = {
"shouldBeDifferent": "{0} should be different to {1}", "shouldBeDifferent": "{0} should be different to {1}",
"shouldMatchPattern": "Pattern should match: `/{0}/`", "shouldMatchPattern": "Pattern should match: `/{0}/`",
"mustBeAnInteger": "Must be an integer", "mustBeAnInteger": "Must be an integer",
"notAValidOption": "Not a valid option" "notAValidOption": "Not a valid option",
"selectAnOption": "Select an option"
}, },
"fr": { "fr": {
/* spell-checker: disable */ /* spell-checker: disable */
@ -223,7 +224,8 @@ const keycloakifyExtraMessages = {
"logoutConfirmTitle": "Déconnexion", "logoutConfirmTitle": "Déconnexion",
"logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?", "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 */ /* spell-checker: enable */
} }
}; };

View File

@ -17,7 +17,7 @@ export type UserProfileFormFieldsProps = {
export function UserProfileFormFields(props: UserProfileFormFieldsProps) { export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
const { kcContext, onIsFormSubmittableValueChange, i18n, getClassName, BeforeField, AfterField } = props; const { kcContext, onIsFormSubmittableValueChange, i18n, getClassName, BeforeField, AfterField } = props;
const { advancedMsg } = i18n; const { advancedMsg, msg } = i18n;
const { const {
formValidationState: { fieldStateByAttributeName, isFormSubmittable }, formValidationState: { fieldStateByAttributeName, isFormSubmittable },
@ -98,11 +98,16 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
} }
value={value} value={value}
> >
{options.options.map(option => ( <>
<option key={option} value={option}> <option value="" selected disabled hidden>
{option} {msg("selectAnOption")}
</option> </option>
))} {options.options.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</>
</select> </select>
); );
} }