[BUG] Translations confusion with several forms on the same page

Bug Description

We have 2 similar forms embedded in the same page. Some fields are shared, but translation is different since they reflect 2 different contexts. We are loading the forms with the standard js

Formio.createForm(document.getElementById('[id]'), 
   'https://...', 
   {"language":"en","i18n":{"de": [....] }}}
 ).then(function(form) { 
    ....
    form.language = 'de';
    .... } ) 

This code is repeated twice. Each form is displayed in a tab (but same issue is observed if both forms are just one after the other).

Randomly a form is not translated whereas the other one is correctly translated, or the translations of one form is applied totally or partially to the other one. Of course, this second flavor of the issue only concerns translations of identical keys.

Environment

• Hosting type
  • [] Form.io
  • [x ] Local deployment
    • Version:
• Formio.js version: Latest (currently: v4.1.0)
• Frontend framework: Rails
• Browsers: Chrome 77 on OSX 10.13 and 10.14, Chrome 67 on Chromebook and also Firefox, safari. It looks like something may be related to how forms are redrawn. For example when previously hidden fields are displayed, the translation is almost always the wrong one.

Example

Page with 2 tabs and 2 forms: https://www.switchup.de/v2/widgets/is24/recommendations

The form is in German, but it’s easy to spot the confusion. There are strings with “Strom” that should be displayed only on the “Strom” tab and other strings with “Gas” that should be displayed only on the “Gas” tab.

Another way to spot is to reload several times. The translations of the buttons in the “Strom” tab will change.

Source of form 1: https://mitra.switchup.de/forms/electricity-is24.js?selector=mytab

Source of form 2: https://mitra.switchup.de/forms/gas-is24.js?selector=mytab2

[Vedhachala]

@travist @shawnbot Thanks for the help. The first method worked for me.

[travist]

You should be able to pass along this option using the renderOptions parameter within the Angular component like so.

<formio [form]="formJSON" [renderOptions]="{
  i18next: i18NextInstance
}"></formio>