[BUG] Edit form does not save form after initial save

[7er]

Environment

• Hosting type

  • [x] Form.io
  • [ ] Local deployment
    • Version:

• React app starter kit git commit: 52ae0d4e5f1cc75ddbf310b186c4b90ecdbc55dd

• Formio.js version: [email protected]

• Frontend framework: [email protected]

• Browser: chrome

• Browser version: 81

Steps to Reproduce

1. Clone react-starterkit repo
2. npm install
3. Configure PROJECT_URL to your project
4. npm start
5. Login with admin user
6. Create a new form
7. Edit form and add one field
8. Save form
9. Add another field
10. Save form
11. Reload page

Expected behavior

Both fields are still present after reloading page

Observed behavior

9. Save form (the newly added field is not present in xhr call to server)
10. Reload form and the newly added field is gone

Example

Before adding second field (after step 7.)

Add second field and save it (step 8 and 9)

UI and save response

UI and save request body

[randallknutson]

We've seen this issue from time to time and thought we had it fixed. The issue is that the connection with the scoped variable within the react app gets lost during the update process when react refreshes the props. This needs to be investigated again to see if something has broken again recently and how to fix it.

[7er]

I've localized the bug to the implementation of FormEdit.getDerivedStateFromProps. When adding the second field/component to the form this function overwrites this.state.form with this.props.form.

[rahulseth625]

@7er @randallknutson Can you pls see why am I getting this error formio/react-app-starterkit#17

[handhikadj]

I'm getting this issue. I notice on page loads, it triggers the onChange with empty values of the submission.data object

const onFormioChange = async (submission: any) => {
        const formData = new FormData();
        formData.append('form_values', JSON.stringify(submission.data))

        const updateFormValues = await fetch(`/form/update`, {
            method: 'POST',
            body: formData
        })
    }
    
    return <Form
        onChange={onFormioChange}
    />

this needs to be fixed ASAP!!!

[unnatijadhav]

can i check this?

[lane-formio]

can i check this?

@unnatijadhav Absolutely, please do!