Strings set in a custom control that use custom lang file show as undefined when first rendered but work on second render about formbuilder HOT 9 OPEN

Hi @breagol37, once I find some time to test this it will land in a release.

@kevinchappell I think the change to render() keeps any possible BC change to a minimum. I'll also look at moving the mi18n.init higher up in the formRender constructor to get the request going ASAP.

from formbuilder.

Can you please provide a custom control script and lang file to reproduce the issue.

from formbuilder.

testControl.txt
en-US.txt

Thanks added above but as text files as could not upload as js or lang.

from formbuilder.

Hi @breagol37, thank you. I will take a look.

from formbuilder.

Thank you @lucasnetau

from formbuilder.

HI @breagol37

The issue occurs because the formRender render() function does not wait for the translation library to be ready.

This patch fixes your issue but render() is not meant to be async and breaks the Jest tests and possibly a BC break.

@kevinchappell Thoughts on this one? formBuilder aways the mi18n library to initialise, formRender does not.

diff --git a/src/js/form-render.js b/src/js/form-render.js
index 8331960..4a79197 100644
--- a/src/js/form-render.js
+++ b/src/js/form-render.js
@@ -67,8 +67,9 @@ class FormRender {
     //Override any sanitizer configuration
     setSanitizerConfig(this.options.sanitizerOptions)
 
+    this.mi18nLoading = null
     if (!mi18n.current) {
-      mi18n.init(this.options.i18n)
+      this.mi18nLoading = mi18n.init(this.options.i18n)
     }
 
     // parse any passed formData
@@ -186,7 +187,7 @@ class FormRender {
    * @param {number} instanceIndex - instance index
    * @return {Object} rendered form
    */
-  render(element = null, instanceIndex = 0) {
+  async render(element = null, instanceIndex = 0) {
     const formRender = this
     const opts = this.options
     element = this.getElement(element)
@@ -197,6 +198,11 @@ class FormRender {
       }
     }
 
+    if (this.mi18nLoading) {
+      await this.mi18nLoading
+      this.mi18nLoading = null
+    }
+
     // Begin the core plugin
     const rendered = []
 

from formbuilder.

@lucasnetau this is a good patch. My only doubt is if we should await all of formRender or just the render method.

Await only render method may have least impact though so let's go with your solution.

from formbuilder.

Thanks for looking into this so quickly @lucasnetau greatly appreciated.

from formbuilder.

@lucasnetau Will that fix be put into a release?

from formbuilder.