React: Bug: Using dispatchEvent 'submit' CustomEvent failure to trigger form onSubmit

[EastblueOkay]

React version: 17+

Steps To Reproduce

1.form add onSubmit props
2.dispatchEvent a CustomEvent with 'submit' name

Link to code example: https://codesandbox.io/s/admiring-almeida-3b26k?file=/src/App.js

The current behavior

failure to trigger form onSubmit

The expected behavior

onSubmit can be successfully triggered until 17.

[lsky-walt]

same too 🤩

[eps1lon]

Thanks for the report.

A submit event has to bubble: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event. React handled the non-bubbling case in 16 but I think the change in behavior is correct. What's the reason to not let this event bubble and use a CustomEvent instead of Event?

But you don't need to dispatch custom events. If you convert your <button type="button" /> to <button type="submit" /> and event.preventDefault() in your submit handler, you should have the same behavior.

[EastblueOkay]

@eps1lon Hi, my scenario is click on a button outside the form to trigger a submit.
The form is in the body of the modal box and the submit button is in the footer of the modal box.
That's why I need to trigger the form submission manually.

[eps1lon]

That's why I need to trigger the form submission manually.

I hope you're aware that dispatching the submit events does not trigger form validation. You could get a ref to the form and run form.requestSubmit() (for form validation) or form.submit() (no form validation).

What's the reason you need a non-bubbling CustomEvent?

Note: Though it still might be problematic that non-bubbling submit events don't work since submit events don't bubble by spec. Though they might in all the supported browsers.

[EastblueOkay]

Thank you for your answer.
Looks like I was mistaken, I originally thought there was no reason for Summit to bubble.