put focus on the right field (#2296)

fixes translation keys as well
fixes: #1180
This commit is contained in:
Erik Jan de Wit 2022-03-22 12:16:02 +01:00 committed by GitHub
parent 8631584920
commit b68ddc2843
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -29,14 +29,14 @@ export const AddMessageBundleModal = ({
handleModalToggle, handleModalToggle,
save, save,
}: AddMessageBundleModalProps) => { }: AddMessageBundleModalProps) => {
const { t } = useTranslation("groups"); const { t } = useTranslation("realm-settings");
const { register, errors, handleSubmit } = useForm(); const { register, errors, handleSubmit } = useForm();
return ( return (
<Modal <Modal
variant={ModalVariant.small} variant={ModalVariant.small}
title={t("realm-settings:addMessageBundle")} title={t("addMessageBundle")}
isOpen={true} isOpen
onClose={handleModalToggle} onClose={handleModalToggle}
actions={[ actions={[
<Button <Button
@ -63,12 +63,12 @@ export const AddMessageBundleModal = ({
> >
<Form id="bundle-form" isHorizontal onSubmit={handleSubmit(save)}> <Form id="bundle-form" isHorizontal onSubmit={handleSubmit(save)}>
<FormGroup <FormGroup
label={t("realm-settings:key")} label={t("common:key")}
name="key" name="key"
fieldId="email-id" fieldId="key"
helperTextInvalid={t("users:emailInvalid")} helperTextInvalid={t("common:required")}
validated={ validated={
errors.email ? ValidatedOptions.error : ValidatedOptions.default errors.key ? ValidatedOptions.error : ValidatedOptions.default
} }
isRequired isRequired
> >
@ -80,29 +80,28 @@ export const AddMessageBundleModal = ({
id="add-key" id="add-key"
name="key" name="key"
validated={ validated={
errors.email ? ValidatedOptions.error : ValidatedOptions.default errors.key ? ValidatedOptions.error : ValidatedOptions.default
} }
/> />
</FormGroup> </FormGroup>
<FormGroup <FormGroup
label={t("realm-settings:value")} label={t("common:value")}
name="add-value" name="add-value"
fieldId="value-id" fieldId="value-id"
helperTextInvalid={t("users:emailInvalid")} helperTextInvalid={t("common:required")}
validated={ validated={
errors.email ? ValidatedOptions.error : ValidatedOptions.default errors.value ? ValidatedOptions.error : ValidatedOptions.default
} }
isRequired isRequired
> >
<TextInput <TextInput
data-testid="value-input" data-testid="value-input"
ref={register({ required: true })} ref={register({ required: true })}
autoFocus
type="text" type="text"
id="add-value" id="add-value"
name="value" name="value"
validated={ validated={
errors.email ? ValidatedOptions.error : ValidatedOptions.default errors.value ? ValidatedOptions.error : ValidatedOptions.default
} }
/> />
</FormGroup> </FormGroup>