amplify-ui

amplify-ui copied to clipboard

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

1. 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
2. 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.

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

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

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

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.

Let's discuss at an upcoming bug bash @sammartinez

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

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

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.

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?