test: failing test with submitter value not appended to form data

Currently, remix-react's `<Form>` through `useSubmit` (`useSubmitImpl`)
implementation, includes the submitter value by setting it on the
`formData`. Unfortunetly, this may override any existing inputs having
the same name than the submitter; resulting in data loss.

Instead, the submitter's value should be appended to the `formData`.

contributors.yml

@@ -283,6 +283,7 @@
 - niwsa
 - nobeeakon
 - nordiauwu
+- nrako
 - nurul3101
 - nvh95
 - nwalters512

integration/bug-report-test.ts

@@ -48,27 +48,33 @@ test.beforeAll(async () => {
     ////////////////////////////////////////////////////////////////////////////
     files: {
       "app/routes/index.jsx": js`
-        import { json } from "@remix-run/node";
-        import { useLoaderData, Link } from "@remix-run/react";
+        import { useLoaderData, useSubmit, Form } from "@remix-run/react";
 
-        export function loader() {
-          return json("pizza");
+        export function loader({ request }) {
+          let url = new URL(request.url);
+          return url.searchParams.toString()
         }
 
         export default function Index() {
+          let submit = useSubmit();
+          let handleClick = event => submit(nativeEvent.submitter || e.currentTarget)
           let data = useLoaderData();
           return (
-            <div>
-              {data}
-              <Link to="/burgers">Other Route</Link>
-            </div>
-          )
-        }
-      `,
+            <Form>
+              <input type="text" name="tasks" defaultValue="first" />
+              <input type="text" name="tasks" defaultValue="second" />
 
-      "app/routes/burgers.jsx": js`
-        export default function Index() {
-          return <div>cheeseburger</div>;
+              <button type="submit" name="tasks" value="">
+                Add Task
+              </button>
+
+              <button onClick={handleClick} name="tasks" value="third">
+                Prepare Third Task
+              </button>
+
+              <pre>{data}</pre>
+            </Form>
+          )
         }
       `,
     },
@@ -85,22 +91,28 @@ test.afterAll(async () => appFixture.close());
 // add a good description for what you expect Remix to do 👇🏽
 ////////////////////////////////////////////////////////////////////////////////
 
-test("[description of what you expect it to do]", async ({ page }) => {
+test("<Form> submits the submitter's value appended to the form data", async ({
+  page,
+}) => {
   let app = new PlaywrightFixture(appFixture, page);
-  // You can test any request your app might get using `fixture`.
-  let response = await fixture.requestDocument("/");
-  expect(await response.text()).toMatch("pizza");
-
-  // If you need to test interactivity use the `app`
   await app.goto("/");
-  await app.clickLink("/burgers");
-  expect(await app.getHtml()).toMatch("cheeseburger");
-
-  // If you're not sure what's going on, you can "poke" the app, it'll
-  // automatically open up in your browser for 20 seconds, so be quick!
-  // await app.poke(20);
+  await app.clickElement("text=Add Task");
+  await page.waitForLoadState("load");
+  expect(await app.getHtml("pre")).toBe(
+    `<pre>tasks=first&amp;tasks=second&amp;tasks=</pre>`
+  );
+});
 
-  // Go check out the other tests to see what else you can do.
+test("`useSubmit()` returned function submits the submitter's value appended to the form data", async ({
+  page,
+}) => {
+  let app = new PlaywrightFixture(appFixture, page);
+  await app.goto("/");
+  await app.clickElement("text=Prepare Third Task");
+  await page.waitForLoadState("load");
+  expect(await app.getHtml("pre")).toBe(
+    `<pre>tasks=first&amp;tasks=second&amp;tasks=third</pre>`
+  );
 });
 
 ////////////////////////////////////////////////////////////////////////////////