Duplicate Rendering of Fields/Labels When Setting Form Submission on Initial Load

[fuadkhan1996]

Describe the bug
After updating to the latest version of Formio.js, I am experiencing an issue where form fields and labels are rendered twice when setting the form submission data during the initial load of the form. This issue occurs consistently when using the this.form.submission = { data: data } method right after creating the form. Removing this line results in the form rendering correctly, suggesting that the issue is directly related to setting the submission data

Version/Branch
4.19.2

To Reproduce
Steps to reproduce the behavior:

1. Create a form using Formio.createForm().
2. Immediately set the form submission using this.form.submission = { data: data }.
3. Observe that most of the form fields and labels are rendered twice.

Expected behavior
Setting the form submission data should only update the form fields with the provided data without causing any additional rendering issues.

Screenshots

Additional context
The form fields and labels are duplicated, indicating an extra rendering process is triggered when the form submission is set on the initial load. It's working fine on version 4.16.0.

[brendanbond]

Hi @fuadkhan1996 thanks for reporting this, although I'm unable to reproduce this issue using version 4.19.2. Can you fork the JSFiddle I've provided and help us out with a minimal reproducible example?

[jamie-steele]

Wanted to post this as I also ran into the issue and found a solution.

I was originally assigning the data in the same way and was able to replicate the problem, I changed my code to loop through all my properties in the source object and simply assign them.

I am wondering if the cause is something to do with when your assigning this way and you have a missing property in your source it makes form.io think its missing and it readds it when rendering.

In my specific example it was HTML components which we didn't have in the form JSON data.

Before

function CombineData(form, formDataJson) {
    form.submission = { data: formDataJson };
}

After

function CombineData(form, formDataJson) {
    for (const key in formDataJson) {
        if (formDataJson.hasOwnProperty(key)) {
            if (formDataJson[key] === "[object Object]") {
                // Ignore incorrectly serialized objects
                console.log(`Detected [object Object] at key: ${key}`);
                form.submission.data[key] = "";
            } else {
                form.submission.data[key] = formDataJson[key];
            }
        }
    }
}

[brendanbond]

Hi @jamie-steele would you be willing to post your custom component ?

[fuadkhan1996]

Hi @brendanbond, I have the example set for you. I don't know what the possible solution can be but this is the bug in all the versions starting from 4.19.2.

https://jsfiddle.net/fuadk/28yrxapg/7/

[brendanbond]

Hey @fuadkhan1996 you can find more details about this issue in the description for #5792 - the markup in your HTML component is invalid, which causes the renderer to miss the attach phase for the first pass and just pop it into the DOM outside of any formio containers. Change the parent element to something like <div /> and it should work as expected.