feat: simplify form submit logic via event.submitter

Copies the changes from remix remix-run/remix#3094

Author: brophdawg11

packages/react-router-dom/__tests__/DataBrowserRouter-test.tsx

@@ -967,6 +967,9 @@ function testDomRouter(name, TestDataRouter, getWindow) {
           </TestDataRouter>
         );
 
+        // Note: jsdom doesn't properly attach event.submitter for
+        // <button type="submit"> clicks, so we have to use an input to drive
+        // this.  See https://github.com/jsdom/jsdom/issues/3117
         function Comp() {
           let fetcher = useFetcher();
           return (
@@ -977,14 +980,12 @@ function testDomRouter(name, TestDataRouter, getWindow) {
                 {fetcher.data ? JSON.stringify(fetcher.data) : null}
               </p>
               <fetcher.Form>
-                <button type="submit" name="increment" value="1">
-                  submit get 1
-                </button>
+                <input name="increment" value="1" />
+                <button type="submit">submit get 1</button>
               </fetcher.Form>
               <fetcher.Form method="post">
-                <button type="submit" name="increment" value="10">
-                  submit post 10
-                </button>
+                <input name="increment" value="10" />
+                <button type="submit">submit post 10</button>
               </fetcher.Form>
             </>
           );

packages/react-router-dom/index.tsx

@@ -518,6 +518,14 @@ if (__DEV__) {
   Form.displayName = "Form";
 }
 
+type HTMLSubmitEvent = React.BaseSyntheticEvent<
+  SubmitEvent,
+  Event,
+  HTMLFormElement
+>;
+
+type HTMLFormSubmitter = HTMLButtonElement | HTMLInputElement;
+
 interface FormImplProps extends FormProps {
   fetcherKey?: string;
 }
@@ -539,66 +547,20 @@ const FormImpl = React.forwardRef<HTMLFormElement, FormImplProps>(
     let formMethod: FormMethod =
       method.toLowerCase() === "get" ? "get" : "post";
     let formAction = useFormAction(action);
-    let formRef = React.useRef<HTMLFormElement>();
-    let ref = useComposedRefs(forwardedRef, formRef);
-
-    // When calling `submit` on the form element itself, we don't get data from
-    // the button that submitted the event. For example:
-    //
-    //   <Form>
-    //     <button name="something" value="whatever">Submit</button>
-    //   </Form>
-    //
-    // formData.get("something") should be "whatever", but we don't get that
-    // unless we call submit on the clicked button itself.
-    //
-    // To figure out which button triggered the submit, we'll attach a click
-    // event listener to the form. The click event is always triggered before
-    // the submit event (even when submitting via keyboard when focused on
-    // another form field, yeeeeet) so we should have access to that button's
-    // data for use in the submit handler.
-    let clickedButtonRef = React.useRef<any>();
-
-    React.useEffect(() => {
-      let form = formRef.current;
-      if (!form) return;
-
-      function handleClick(event: MouseEvent) {
-        if (!(event.target instanceof Element)) return;
-        let submitButton = event.target.closest<
-          HTMLButtonElement | HTMLInputElement
-        >("button,input[type=submit]");
-
-        if (
-          submitButton &&
-          submitButton.form === form &&
-          submitButton.type === "submit"
-        ) {
-          clickedButtonRef.current = submitButton;
-        }
-      }
-
-      window.addEventListener("click", handleClick);
-      return () => {
-        window.removeEventListener("click", handleClick);
-      };
-    }, []);
-
     let submitHandler: React.FormEventHandler<HTMLFormElement> = (event) => {
       onSubmit && onSubmit(event);
       if (event.defaultPrevented) return;
       event.preventDefault();
 
-      submit(clickedButtonRef.current || event.currentTarget, {
-        method,
-        replace,
-      });
-      clickedButtonRef.current = null;
+      let submitter = (event as unknown as HTMLSubmitEvent).nativeEvent
+        .submitter as HTMLFormSubmitter | null;
+
+      submit(submitter || event.currentTarget, { method, replace });
     };
 
     return (
       <form
-        ref={ref}
+        ref={forwardedRef}
         method={formMethod}
         action={formAction}
         encType={encType}
@@ -823,24 +785,6 @@ export function useFormAction(action = "."): string {
   return pathname + search;
 }
 
-function useComposedRefs<RefValueType = any>(
-  ...refs: Array<React.Ref<RefValueType> | null | undefined>
-): React.RefCallback<RefValueType> {
-  return React.useCallback((node) => {
-    for (let ref of refs) {
-      if (ref == null) continue;
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        try {
-          (ref as React.MutableRefObject<RefValueType>).current = node!;
-        } catch (_) {}
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, refs);
-}
-
 function createFetcherForm(fetcherKey: string) {
   let FetcherForm = React.forwardRef<HTMLFormElement, FormProps>(
     (props, ref) => {