FR (Authenticator): Support dynamic text update when changing languages

wei commented 3 years ago

Is your feature request related to a problem? Please describe. Components are not re-rendering on I18n.setLanguage. Components are rendering initial language strings correctly but they do not re-render on language change.

Relates to aws-amplify/amplify-js#6346 aws-amplify/amplify-js#6115 #6962

Describe the solution you'd like Components should re-render on I18n.setLanguage

Suggestion from @ericclemmons https://github.com/aws-amplify/amplify-js/pull/6346#issuecomment-710227501 :

If I18n.setLanguage fired a Hub event, we could re-render the component 🤔 https://github.com/aws-amplify/amplify-js/blob/377acd0507e6d4be34bf36ea9c0694fa98ac04b1/packages/core/src/I18n/I18n.ts#L64-L66

Describe alternatives you've considered

Force re-render using key attribute
```
<AmplifySignIn key={lang} />
```
Force re-creating the components will result in a screen flicker and loss of component state

Specifying all texts in props

<AmplifySignIn 
  headerText={I18n.get(Translations.XXXXX)}
  formFields={[
    {
      type: "email",
      label: I18n.get(Translations.XXXXX),
      placeholder: I18n.get(Translations.USERNAME_PLACEHOLDER),
      required: true,
    },
    {
      type: "password",
      label: I18n.get(Translations.XXXXX),
      placeholder: I18n.get(Translations.PASSWORD_PLACEHOLDER),
      required: true,
    }
  ]}>
</AmplifySignIn>

Doable but a big hassle : D

Additional context This is happening in @aws-amplify/ui-react. Need to check if other ui-components e.g. angular, vue, etc exhibit the same behavior.

princiya commented 3 years ago

@wei is this issue related to this one? https://github.com/aws-amplify/amplify-js/issues/6898

wei commented 3 years ago

@princiya No, I think that's a different issue about Translations lacking some strings.

mauerbac commented 3 years ago

hey @ericclemmons - can you take a look at this ?

ericclemmons commented 3 years ago

I'd be interested in seeing how well https://github.com/aws-amplify/amplify-js/pull/6346#issuecomment-710227501 works, but the problem may be with Stencil's re-rendering potentially blowing away values in internal state or <input>s.

mauerbac commented 3 years ago

Let's discuss at an upcoming bug bash @sammartinez

eokoneyo commented 3 years ago

Hi there, I'm curious if there's any updates regarding this issue ... I seem to have run into the same issue

wei commented 3 years ago

@eokoneyo For now, you can specify attributes directly as seen in https://github.com/aws-amplify/amplify-js/issues/6962#issuecomment-710701413

ericclemmons commented 2 years ago

We'll need to a PR to Amplify JS so I18n emits Hub events when the language changes.

Only then can the UI components subscribe to this event & re-render with the new dictionary.

Dmytro1410 commented 1 year ago

Hello, I have the same issue but for the angular package.

I've tried to change formFields object according to new translations (using custom translation service), when new values appeared, I updated the object, but nothing happens, also when I do force rerender

Also I've tried to use I18n from 'aws-amplify', but always has only initial translations.

Can anyone help me to solve this problem?

aws-amplify / amplify-ui

FR (Authenticator): Support dynamic text update when changing languages #256