fix(remix-react): Preserve search string in form action when action prop is omitted

[chaance]

When a Form action is omitted, the default value is "." which resolves to the current route without search params. This is intended behavior when "." is passed to useResolvedPath, but Remix docs specify that when an action is omitted that the default action is the current location. Users would expect that to include the search string.

Closes: #927
Closes: #931

• Docs
• Tests

Testing Strategy:

Added tests to the existing form integration test file.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9147639

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/dev	Patch
@remix-run/eslint-config	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/cloudflare	Patch
@remix-run/node	Patch
@remix-run/deno	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/express	Patch
@remix-run/netlify	Patch
@remix-run/vercel	Patch
@remix-run/architect	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

[ryanflorence]

Remix docs specify that when an action is omitted that the default action is the current location

The docs are wrong then 🙈. If action is ommitted, the default action is "." which means the closest route in context, not the current location (just like <Link to=".">. Nested routing adds a new concept here (at the cost of some complexity).

Preserving search params seems like the right thing to do, but I'm trying to think about the symmetry here:

Default Browser/HTML Behavior

element	preserves search
<a href=".">	❌
<form method="get" action=".">	❌
<form method="get">	✅ technically... technically "yes", the form.action includes the search but the form fields wipe it out when submitted, so practically "no"
<form method="post" action=".">	❌
<form method="post">	✅

https://rv02u9.csb.app/foo/?bar#baz

So:

• . means location.pathname only
• omitted action means location.pathname + location.search + location.hash

What Form should do

The new concept with nested routes is that . means "closest route in context" instead of location.pathname.

The problem seems to be that we are defaulting action to ., which is inconsistent with browser behavior. We should default it to the closest route in context (the new concept) but then be consistent with the browser from there and use route.path + location.search + location.hash.

The changes on this PR treat . and an omitted action the same, which I don't think is what we want to do. Instead we should do this:

element	preserves search
<Link to=".">	❌
<Form method="get" action=".">	❌
<Form method="get">	✅
<form method="post" action=".">	❌
<form method="post">	✅

I expect the change to be pretty simple.

• Make action optional, don't include a default "." anymore.
• If there is no action, default to the resolvedRoute.path + location.search + location.hash