formFields not updated on state change

[xavierraffin]

Describe the bug
When using formFields on Amplify UI component, the field labels and placeholder are not recalculated when state change.
This prevents the usage of the component with advance i18n feature.

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/xavierraffin/fizz-demo
2. Checkout branch bug-amplify
3. npm install
4. npm start
5. amplify init (or copy this file: https://github.com/xavierraffin/fizz-demo/blob/bug-amplify/example-aws-export.js)
6. toggle the lang using the top button

Expected behavior
The lang of all fields should update.

Code Snippet
This is the type of code that doesn't work: (source: https://github.com/xavierraffin/fizz-demo/blob/bug-amplify/src/App.js)

toggleLang = () => {
    if (this.state.lang === "en") {
      I18n.setLanguage("fr");
      this.setState({ lang: "fr" });
    } else {
      I18n.setLanguage("en");
      this.setState({ lang: "en" });
    }
  }

  render = () => (
    <div>
      <AmplifyButton onClick={this.toggleLang}>langue {this.state.lang}</AmplifyButton>
      <AmplifyAuthenticator usernameAlias="email">
        <AmplifySignIn
          usernameAlias="email"
          headerText={I18n.get("signInHeader")}
          slot="sign-in"
          formFields={[
            {
              type: "email",
              label: I18n.get("emailLabel"),
              placeholder: I18n.get("emailPlaceHolder"),
              required: true,
            },
            {
              type: "password",
              label: I18n.get("passwordLabel"),
              placeholder: I18n.get("passwordPlaceHolder"),
              required: true,
            }
          ]}></AmplifySignIn>
        </AmplifyAuthenticator>
    </div>
  );

My string file is (source: https://github.com/xavierraffin/fizz-demo/blob/bug-amplify/src/strings.js)

export const strings = {
    en: {
        signInHeader: "Sign in your Fizz account",
        signUpHeader: "Create your fizz account",
        emailLabel: "Email",
        emailPlaceHolder: "your.email@example.com",
        passwordLabel: "Password",
        passwordPlaceHolder: "xxxxxxxxx",
        phoneNumberLabel: "Phone number",
        phoneNumberPlaceHolder: "555-555-5555"
    },
    fr: {
        signInHeader: "Connexion à votre compte Fizz",
        signUpHeader: "Créer un compte Fizz",
        emailLabel: "Adresse de messagerie",
        emailPlaceHolder: "votre.email@exemple.com",
        passwordLabel: "Mot de passe",
        passwordPlaceHolder: "xxxxxxxxx",
        phoneNumberLabel: "Numéro de téléphone",
        phoneNumberPlaceHolder: "555-555-5555"
    },
};

Screenshots
English is OK:

French is KO:

What is Configured?
Not really relevant but my conf is here:
https://github.com/xavierraffin/fizz-demo/blob/bug-amplify/example-aws-export.js

Additional context
Tested only in dev on Chrome

[jordanranz]

Thanks for the reproduction repo. Investigating this behavior now

[jordanranz]

The fix should be on @aws-amplify/ui-react@unstable now. Please test. If you experience any issues, you can go ahead and open a new issue so we can track it.

Thanks for submitting feedback @xavierraffin

[xavierraffin]

It works @jordanranz!
Demo is here: https://d2f8ykbxooc86y.cloudfront.net

[xavierraffin]

Please let me know when merged

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.