[BUG] Impossible to replace Form submission with custom object

[mm-dsibinski]

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [x ] Local deployment
    • Version: react-formio 4.3.0 (but the issue also occurs in formio.js)
• Formio.js version: 4.0.0-rc.21
• Frontend framework: React
• Browser: Google Chrome
• Browser version: Version 83.0.4103.116 (Official Build) (64-bit)

Steps to Reproduce

1. Clone the react-app-starterkit repo
2. Modify Login class in Login.js file to look as follows:

const Login = class  extends Component {
  render() {
    return (
      <Form {...this.props} onChange={this.formChange} submission={{data: {testProp: 2}}} />
    );
  }

  formChange = (submission) => {
    console.log(submission.data);
  };
}

3. Execute "npm install" and "npm start" to run the app
4. Open Chrome Developer Console (F12) and click on "Login | Register" button in the top-right corner of the app

Expected behavior

By submitting a custom submission object to the Form component I expect my custom object to override the default one taken from form definition when custom submission is not given.

Observed behavior

The custom submission object is merged with the default one:

so the default properties of the form (email, password) and my custom one (testProp) are present in the submission object in onChange function.

I don't know if this is really a bug, but I'm working on a view in our application where i's really problematic. According to the documentation I would expect that the submission object is replaced, not merged with the default one.

Maybe I'm doing something wrong here?

Thanks a lot for your help :)

[mm-dsibinski]

After re-thinking the issue I think this is a desired behavior. However, maybe in some cases it would be useful to be able to override the "submission" object instead of merging it?

[randallknutson]

I think the reason for this is that the component instances manage their own state internally so if you set a new submission object that doesn't have a value for the component it will keeps its old value. Then when you get the submission object is pulled again, it will contain all of the values. There might be some edge cases where this causes a problem and we'd be open to a solution but don't have any plans to look at it right now.

[mm-dsibinski]

Thanks for answering @randallknutson . Yes, this is also what I finally found out. The solution is to set a unique key for each component instance to make sure the components are not treated as the same one. As you said, it might be problematic in some edge cases, so I'm leaving this issue open for the future.

[TanyaGashtold]

I am closing the issue as it was created too long ago and there are no new comments here. I hope it was resolved. If not, please reopen it. Thanks!