fix(remix-react): GET form submissions should replace current search params

[brophdawg11]

The recent work done in #3697 uncovered a previously unknown bug where we do not match default browser behavior. By default, non-JS <form method="get"> will replace any existing search parameters in the URL, but our behavior has been to append (without first resetting the params) since #814.

Default browser behavior is shown in this code sandbox. You may have to open it in a new window and load it with some existing query params, and then submit the form. I.e., https://e26g6e.sse.codesandbox.io/?junk=value

This new Remix behavior also has the side effect of no longer including the ?index in the destination URL (even though it is included in the form action). This should have no impact since GET submissions run all relevant loaders.

// routes/parent/index.tsx
<Form>
  <input name="bar" value="2" />
  <button type="submit">Submit</button>
</Form>

• Current behavior after fix(remix-react): Preserve search string in form action when action prop is omitted #3697
  • User loads /parent?foo=1
  • Rendered HTML is <form action="/parent?index&foo=1">
  • User clicks submit
  • Browser URL navigates to /parent?index&foo=1&bar=2
  • Rendered HTML is now <form action="/parent?index&foo=1&bar=2">
• New behavior
  • User loads /parent?foo=1
  • Rendered HTML is <form action="/parent?index&foo=1">
  • User clicks submit
  • Browser URL navigates to /parent?bar=2
  • Rendered HTML is now <form action="/parent?index&bar=2">

Closes: #4044

• Docs
• Tests

Testing Strategy:

• Updated form-test integration tests

[changeset-bot]

🦋 Changeset detected

Latest commit: 2afce3f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@remix-run/react	Patch
create-remix	Patch
remix	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/deno	Patch
@remix-run/dev	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/netlify	Patch
@remix-run/node	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/vercel	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[brophdawg11]

This was the underlying problem, now that our default behavior for no action was to include search params, we were just appending to them here instead of starting with an empty set on GET submissions

[jenseng]

As a temporary workaround, you can put an action="/the/url/without/params" prop on your <Form> (or formAction on your submit button) to ensure you get a blank slate

[brophdawg11]

@jenseng Yeah that should do the trick for now. You can also just do action="." which should be equivalent, since . won't include params

[chaance]

Great explanation and repro!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-c22b6ac-20220827 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[ziimakc]

@brophdawg11 How to preserve then current search params? Mapping search params to hidden inputs is not convenient.

[brophdawg11]

That would be my recommendation - I don't find it all that inconvenient:

  let [params] = useSearchParams();
  ...
  <Form>
    {Array.from(params.entries()).map(([k, v], idx) => (
      <input type="hidden" name={k} defaultValue={v} key={idx} />
    ))}