Preserve search parameters in remote form actions#16373
Conversation
|
Install the latest version of pnpm add https://pkg.svelte.dev/@sveltejs/kit/c/fce4c631e93b643627c4ff46cc219c794d88e0a7Open in Note This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed. |
🦋 Changeset detectedLatest commit: fce4c63 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
| get: () => `?/remote=${__.id}`, | ||
| get: () => { | ||
| const search = new URLSearchParams(get_request_store().event.url.search); | ||
| search.set('/remote', __.id); |
There was a problem hiding this comment.
This encodes the / in /remote which causes the tests to fail. We need to add it without setting it on URLSearchParams to avoid encoding it both here and on the client.
| const action_id_without_key = id; | ||
| const action_id = id + (key != undefined ? `/${JSON.stringify(key)}` : ''); | ||
| const action = '?/remote=' + encodeURIComponent(action_id); | ||
| const search = new URLSearchParams(location.search); |
There was a problem hiding this comment.
This serialises the search params of the page when the instance is created but we should do it only when it's needed instead so that if the search params are updated, it includes those changes
Might be good to add a test for that too
|
|
||
| await page.fill('[data-unscoped] input', 'hello'); | ||
| await page.getByText('set message').click(); | ||
| await expect(page).toHaveURL(/existing=value/); |
There was a problem hiding this comment.
| await expect(page).toHaveURL(/existing=value/); | |
| await test.step('preserves URL query', async () => { | |
| await expect(page).toHaveURL((url) => url.searchParams.get('existing') === 'value'); | |
| }); |
2 participants
closes #16363
Remote form actions were generated as
?/remote=..., so a native form submission replaced the page's existing query string. Generate the action from the current search parameters instead, then set the internal/remoteparameter.This keeps user-visible parameters such as pagination when JavaScript is disabled, and keeps the client-generated action aligned with the server-generated one.
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkAdditional validation:
pnpm --dir packages/kit/test/apps/async exec playwright test test.js --grep 'form works'(Chromium with and without JavaScript)pnpm -F @sveltejs/kit prepublishOnlyChangesets
@sveltejs/kit.Edits