Prevent submit from propagating.

[fsteger]

Reasons for making this change

When forms are nested in the react DOM, child submit events will otherwise propagate to the parent form. This can result in unexpected behavior, such as stale data on the parent form if submission of the child triggers an update to the parent's data.

Checklist

• I'm updating documentation
  • I've checked the rendering of the Markdown text I've added
• I'm adding or updating code
  • I've added and/or updated tests
  • I've updated docs if needed
• I'm adding a new feature
  • I've updated the playground with an example use of the feature

[epicfaace]

Trying to understand your use case -- forms should not be nested anyway, so maybe there is another solution to this?

[juliankigwana]

I have a use case:

Take the following schema property nameIdValueMap which is an Array and each child has its own child properties. I would like to utilise the power of the RJSF library and the components I have build around it to render these child properties in a sub-form, however when I do so we have the propagation issue as well as invalid html output having nested forms.

"nameIdValueMap": {
    "title": "NameID Value Map",
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "key": {
                "title": "Key",
                "type": "string"
            },
            "value": {
                "title": "Value",
                "type": "string"
            },
            "binary": {
                "title": "Binary",
                "type": "boolean"
            }
        }
    }
}

There is an added issue with the fact that the form tag is hard coded into the Form.js and that nesting forms like this will produce invalid html and a nasty error in the console. I would recommend then that in addition to this change it would need a way to override the form tag with something else. This should allow us to render complex nested schemas inside of arrays.

[epicfaace]

Yes, I agree, being able to override the default tag created so it is not a <form> would help, and I would definitely accept a PR that does that.

If that happens, though, is there any additional need for preventing submit form from propagating? (given that we won't need to have nested <form> tags)

[fsteger]

For my use case, the forms were not nested in the html dom; only the react dom.

I was using a custom ArrayFieldTemplate that adds in a control for each row that opens a modal in a react portal. The modal has a form where the user can update some aspects of the row, such as entering a new position. On submitting the form, what I was seeing was the Form.js onSubmit getting called twice-- once targeting the modal form (expected), and again targeting the parent form (unexpected). This was creating an odd race condition where the child form's submit would update the form data (such as changing the row's position); and then the parent form's onSubmit would run with the stale data still in its state, essentially reverting the change.

[epicfaace]

I see, makes sense, thanks!

[epicfaace]

It seems like it's not a good idea to stop event propagation, though. https://css-tricks.com/dangers-stopping-event-propagation/

Since the event we're trying to prevent (parent form submission) is also controlled by us in rjsf, could we perhaps alternatively do this by adding some logic in onSubmit to see whether the form that initiated the event is the same as the current form?

[epicfaace]

Thanks for the change. All right -- seems like the logic is sufficiently complicated that it needs a test. Could you add a test with a Form-in-Form scenario?

[epicfaace]

So we can get more specificity on what exactly called onSubmit -- can you create two functions, outerOnSubmit and innerOnSubmit, then test to see if outerOnSubmit is never called and innerOnSubmit is called?

[epicfaace]

Looks good -- thanks!