@uppy/form: bring back submit() instead of requestSubmit()

[Murderlon]

Closes #5278

Sometime ago I switched our form.submit() to form.requestSubmit() (#4852) so that we first trigger form validation and only submit when there are no errors, while submit() always submits.

Unfortunately I didn't realize that unlike submit() requestSubmit() triggers the 'submit' event again, which caused a loop. This was fixed in #5058.

Unfortunately I didn't realize again that requestSubmit() no longer works after event.preventDefault(), which we need for the triggerUploadOnSubmit in order to hold off the submit to upload with Uppy. If you also enable submitOnSuccess, then once we reach requestSubmit() it no longer works because of preventDefault().

AFAIK for these specific set of conditions we support in Uppy, we can't reliably use requestSubmit so I'm putting submit back.

[github-actions]

Diff output files

diff --git a/packages/@uppy/form/lib/index.js b/packages/@uppy/form/lib/index.js
index 3f1d23e..a1f8cbb 100644
--- a/packages/@uppy/form/lib/index.js
+++ b/packages/@uppy/form/lib/index.js
@@ -1,13 +1,3 @@
-function _classPrivateFieldLooseBase(receiver, privateKey) {
-  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
-    throw new TypeError("attempted to use private field on non-instance");
-  }
-  return receiver;
-}
-var id = 0;
-function _classPrivateFieldLooseKey(name) {
-  return "__private_" + id++ + "_" + name;
-}
 import BasePlugin from "@uppy/core/lib/BasePlugin.js";
 import findDOMElement from "@uppy/utils/lib/findDOMElement";
 import toArray from "@uppy/utils/lib/toArray";
@@ -30,17 +20,12 @@ function assertHTMLFormElement(input) {
   }
   return input;
 }
-var _completed = _classPrivateFieldLooseKey("completed");
 export default class Form extends BasePlugin {
   constructor(uppy, opts) {
     super(uppy, {
       ...defaultOptions,
       ...opts,
     });
-    Object.defineProperty(this, _completed, {
-      writable: true,
-      value: false,
-    });
     this.type = "acquirer";
     this.id = this.opts.id || "Form";
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
@@ -50,22 +35,22 @@ export default class Form extends BasePlugin {
     this.getMetaFromForm = this.getMetaFromForm.bind(this);
   }
   handleUploadStart() {
-    _classPrivateFieldLooseBase(this, _completed)[_completed] = false;
     if (this.opts.getMetaFromForm) {
       this.getMetaFromForm();
     }
   }
   handleSuccess(result) {
-    _classPrivateFieldLooseBase(this, _completed)[_completed] = true;
     if (this.opts.addResultToForm) {
       this.addResultToForm(result);
     }
     if (this.opts.submitOnSuccess) {
-      this.form.requestSubmit();
+      if (this.form.reportValidity()) {
+        this.form.submit();
+      }
     }
   }
   handleFormSubmit(ev) {
-    if (this.opts.triggerUploadOnSubmit && !_classPrivateFieldLooseBase(this, _completed)[_completed]) {
+    if (this.opts.triggerUploadOnSubmit) {
       ev.preventDefault();
       const elements = toArray(ev.target.elements);
       const disabledByUppy = [];

[aduh95]

Should we use reportValidity()?

[aduh95]

Technically we should add reportValidity to the list of things one needs to polyfill in order to use Uppy with e.g. IE, but we didn't for requestSubmit and no one complained, so I guess we're fine.