Fix escaping in action error URL

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -501,7 +501,7 @@ function setProp(
             // eslint-disable-next-line no-script-url
             "javascript:throw new Error('" +
               'A React form was unexpectedly submitted. If you called form.submit() manually, ' +
-              "consider using form.requestSubmit() instead. If you're trying to use " +
+              "consider using form.requestSubmit() instead. If you\\'re trying to use " +
               'event.stopPropagation() in a submit event handler, consider also calling ' +
               'event.preventDefault().' +
               "')",

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -190,6 +190,8 @@ describe('ReactDOMForm', () => {
         (submitter && submitter.getAttribute('formaction')) || form.action;
       if (!/\s*javascript:/i.test(action)) {
         throw new Error('Navigate to: ' + action);
+      } else {
+        Function(action.substr(11))();
       }
     });
   }
@@ -922,4 +924,66 @@ describe('ReactDOMForm', () => {
     await act(() => resolveText('Wait'));
     assertLog(['Async action finished', 'No pending action']);
   });
+
+  function emulateForceSubmit(submitter) {
+    const form = submitter.form || submitter;
+    const action =
+      (submitter && submitter.getAttribute('formaction')) || form.action;
+    if (!/\s*javascript:/i.test(action)) {
+      throw new Error('Navigate to: ' + action);
+    } else {
+      Function(action.substr(11))();
+    }
+  }
+
+  // @gate enableFormActions
+  it('should error if submitting a form manually', async () => {
+    const ref = React.createRef();
+    let foo;
+
+    function action(formData) {
+      foo = formData.get('foo');
+    }
+
+    let error = null;
+    let result = null;
+
+    function emulateForceSubmit(submitter) {
+      const form = submitter.form || submitter;
+      const action =
+        (submitter && submitter.getAttribute('formaction')) || form.action;
+      if (!/\s*javascript:/i.test(action)) {
+        throw new Error('Navigate to: ' + action);
+      } else {
+        try {
+          result = Function(action.substr(11))();
+        } catch (x) {
+          error = x;
+        }
+      }
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <form
+          action={action}
+          ref={ref}
+          onSubmit={e => {
+            e.preventDefault();
+            emulateForceSubmit(e.target);
+          }}>
+          <input type="text" name="foo" defaultValue="bar" />
+        </form>,
+      );
+    });
+
+    // This submits the form, which gets blocked and then resubmitted. It's a somewhat
+    // common idiom but we don't support this pattern unless it uses requestSubmit().
+    await submit(ref.current);
+    expect(result).toBe(null);
+    expect(error.message).toContain(
+      'A React form was unexpectedly submitted. If you called form.submit()',
+    );
+  });
 });