Programmatic submit does not work properly in Firefox

[nickgros]

Prerequisites

• [X] I have searched the existing issues
• [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [X] I have read the documentation
• [X] Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.0.0-beta6

Current Behavior

When using Firefox programmatic submit ends up embedding a copy of the entire page into the rendered form

Expected Behavior

No response

Steps To Reproduce

No response

Environment

- OS:
- Node:
- npm:

Anything else?

No response

[heath-freenome]

@jacqueswho Do you have time to take a look at this?

[jacqueswho]

ill take a look

[saswat3115]

I also faced same issue. Want programmatically submit as we ll as validating forms also

[nickgros]

Workaround: it seems instead of calling ref.current.submit() as in the docs, you can do ref.current.formElement.current.requestSubmit()

[emielvanseveren]

Workaround: it seems instead of calling ref.current.submit() as in the docs, you can do ref.current.formElement.current.requestSubmit()

Can confirm, this works. Might want to add this to the docs (temporarily).

I looked a bit further into this. And I think (not tested) it has something to do with the dispatched event not being the same event as the actual formSubmitEvent. So when adding e.g. e.preventDefault() in the onSubmitHandler it is trying to stop the formSubmit event and not the custom dispatched event.

I don't have the time to test this, but one could try to add a customEvent.preventDefault() closely after the dispatch and see if it still occurs.

[snlamm]

I looked a bit further into this. And I think (not tested) it has something to do with the dispatched event not being the same event as the actual formSubmitEvent. So when adding e.g. e.preventDefault() in the onSubmitHandler it is trying to stop the formSubmit event and not the custom dispatched event.

Also ran into this issue - though in Chrome - where it was causing the onSubmit function to be called twice. Fortunately, the ref.current.formElement.current.requestSubmit() workaround helps 👍 .

[hirenr]

I can confirm this does not work on Safari. I can see the issue in the playground also.

It seems

requestSubmit

is not supported in Safari at all. So the above workaround also is not working!

[jeremy-marcus]

With the merge of #4150, is this issue now closed?

[heath-freenome]

@jeremy-marcus It most likely is. @nickgros would you be willing to confirm this and close it?