Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tests(remix-react): add failing test for default Form action #3211

Closed
wants to merge 4 commits into from
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix(remix-react): Handle search params in form action (#3133)
Preserve the current location's search params when the default Form action is used.
Ionut Botizan authored and ionut-botizan committed Jun 11, 2022
commit 23f8191797e42bdfabad95e0eba2c5341848ac2b
41 changes: 41 additions & 0 deletions integration/form-test.ts
Original file line number Diff line number Diff line change
@@ -40,6 +40,8 @@ test.describe("Forms", () => {
let SPLAT_ROUTE_CURRENT_ACTION = "splat-route-cur";
let SPLAT_ROUTE_PARENT_ACTION = "splat-route-parent";
let SPLAT_ROUTE_TOO_MANY_DOTS_ACTION = "splat-route-too-many-dots";
let DEFAULT_ACTION_SEARCH_PARAMS = "default-action-search-params";
let EXPLICIT_ACTION_SEARCH_PARAMS = "explicit-action-search-params";

test.beforeAll(async () => {
fixture = await createFixture({
@@ -277,6 +279,22 @@ test.describe("Forms", () => {
)
}
`,

"app/routes/login.jsx": js`
import { Form } from "@remix-run/react";
export default function() {
return (
<>
<Form id="${DEFAULT_ACTION_SEARCH_PARAMS}">
<button>Login</button>
</Form>
<Form id="${EXPLICIT_ACTION_SEARCH_PARAMS}" action="/auth?nonce=123">
<button>Login</button>
</Form>
</>
)
}
`,
},
});

@@ -574,5 +592,28 @@ test.describe("Forms", () => {
expect(el.attr("action")).toMatch("/");
});
});

test.describe("in a route with search params", () => {
test("default action preserves current location's search params", async ({
page,
}) => {
let app = new PlaywrightFixture(appFixture, page);
let url = "/login?redirectTo=/profile";
await app.goto(url);
let html = await app.getHtml();
let el = getElement(html, `#${DEFAULT_ACTION_SEARCH_PARAMS}`);
expect(el.attr("action")).toMatch(url);
});

test("explicit action is preserved as defined", async ({ page }) => {
let app = new PlaywrightFixture(appFixture, page);
let url = "/login?redirectTo=/profile";
let action = "/auth?nonce=123";
await app.goto(url);
let html = await app.getHtml();
let el = getElement(html, `#${EXPLICIT_ACTION_SEARCH_PARAMS}`);
expect(el.attr("action")).toMatch(action);
});
});
});
});
5 changes: 5 additions & 0 deletions packages/remix-react/components.tsx
Original file line number Diff line number Diff line change
@@ -994,9 +994,14 @@ export function useFormAction(
): string {
let { id } = useRemixRouteContext();
let path = useResolvedPath(action);
let location = useLocation();
let search = path.search;
let isIndexRoute = id.endsWith("/index");

if (action === ".") {
ionut-botizan marked this conversation as resolved.
Show resolved Hide resolved
search = location.search;
}

if (action === "." && isIndexRoute) {
search = search ? search.replace(/^\?/, "?index&") : "?index";
}