Create new account page does not detect filled out fields after translation - Amplify Authenticator UI Component

[liamaws]

Describe the bug
After filling out the create account page of the Amplify Authenticator UI Component and then changing the translation, the fields remain filled out on the UI but are not detected when clicking the create account button.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://d2zxvlukxu4lhp.cloudfront.net/
2. Click on Create Account
3. Fill out email address, password and phone number
4. Click top button to switch language to french
5. Click Creer Compte (Create account in french)

I would like to point out that this problem is not specific to using a translation.
It can also be reproduced by doing the following

1. Go to https://d2zxvlukxu4lhp.cloudfront.net/
2. Click on Create Account
3. Fill out email address, password and phone number
4. Don't click on create account but instead click sign in to go back to the sign in page
5. From the sign in page click create account again
6. Now on the create account page the information you entered before will still be there. Click create account

Expected behavior
An account will be created with the information that has been filled out and is present on the UI.

Code Snippet

          <AmplifyAuthenticator usernameAlias="email" style={{ textAlign: 'center' }}>
            <AmplifyForgotPassword
              usernameAlias="email"
              slot="forgot-password"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
              ]}></AmplifyForgotPassword>
            <AmplifySignIn
              usernameAlias="email"
              slot="sign-in"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
                {
                  type: "password",
                  required: true,
                }
              ]}></AmplifySignIn>
            <AmplifySignUp
              usernameAlias="email"
              slot="sign-up"
              formFields={[
                {
                  type: "email",
                  required: true,
                },
                {
                  type: "password",
                  required: true,
                },
                {
                  type: "phone_number",
                  required: false,
                },
                {
                  type: "locale",
                  value: this.state.lang,
                  inputProps: {
                    type: 'hidden',
                  }
                }
              ]}></AmplifySignUp>
            <div>
              {I18n.get("WAIT_REDIRECTION")}
              <AmplifySignOut />
            </div>
          </AmplifyAuthenticator>

Screenshots

[xavierraffin]

Problem remains. Test URL from @liamaws have been changed to https://master.dw8p5s05jola3.amplifyapp.com

[xavierraffin]

Same issue when after SignUp I clic on "CONFIRM":

[ericclemmons]

Quick question – how is the translation being changed?

Is there a language icon in a nav-bar that an end-user can change at any point in time?

[liamaws]

Yes there was button at the top of page that a user can click at any time to change the language of the page. But the issue isn't specific to translation so that is kind of misleading. The issue is that fields will remain filled out in the UI but not actually be considered filled out. Basically the second scenario where no translation is involved is also a problem.

[ericclemmons]

We'll need to send a PR to Amplify JS to support this scenario:

#256 (comment)

As for this issue:

The issue is that fields will remain filled out in the UI but not actually be considered filled out. Basically the second scenario where no translation is involved is also a problem.

This bug should be fixed in @next, but there's an optimization to make where we persist username & other values between forms when switching tabs:

losing-values.mp4

[wlee221]

Hello all, sorry for the tardiness on this issue. This should be resolved in our latest @aws-amplify/ui-react: https://ui.docs.amplify.aws/components/authenticator. Please open a new issue if you face the same problem, thanks 🙏