diff options
| author |  Martin Trapp <94928215+martrapp@users.noreply.github.com>
| 2023-12-01 18:55:22 +0100 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-12-01 18:55:22 +0100 |
| commit | 43ddb5217691dc4112d8d98ae07511a8be6d4b94 (patch) | |
| tree | 0d22f6291ea864ba7b957456c260048d3822fa37 | |
| parent | 3cbd8ea7534910e3beae396dcfa93ce87dcdd91f (diff) | |
| download | astro-43ddb5217691dc4112d8d98ae07511a8be6d4b94.tar.gz astro-43ddb5217691dc4112d8d98ae07511a8be6d4b94.tar.zst astro-43ddb5217691dc4112d8d98ae07511a8be6d4b94.zip | |
Adds missing name/value of the submit button to the form data of a view transition (#9248)
* Adds missing name/value of the submit button to the form data of a view transition
* Update .changeset/ninety-weeks-juggle.md
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---------
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
| -rw-r--r-- | .changeset/ninety-weeks-juggle.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/ViewTransitions.astro | 3 | ||||
| -rw-r--r-- | packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro | 20 | ||||
| -rw-r--r-- | packages/astro/e2e/view-transitions.test.js | 12 |
4 files changed, 38 insertions, 2 deletions
diff --git a/.changeset/ninety-weeks-juggle.md b/.changeset/ninety-weeks-juggle.md new file mode 100644 index 000000000..a78fda846 --- /dev/null +++ b/.changeset/ninety-weeks-juggle.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Adds properties of the submit button (name, value) to the form data of a view transition diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 934ae650f..6ce08cec9 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -97,10 +97,9 @@ const { fallback = 'animate' } = Astro.props; if (el.tagName !== 'FORM' || isReloadEl(el)) { return; } - const form = el as HTMLFormElement; const submitter = ev.submitter; - const formData = new FormData(form); + const formData = new FormData(form, submitter); // Use the form action, if defined, otherwise fallback to current path. let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname; const method = submitter?.getAttribute('formmethod') ?? form.method; diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro new file mode 100644 index 000000000..7a62fbe47 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro @@ -0,0 +1,20 @@ +--- +import { ViewTransitions } from 'astro:transitions'; +--- + +<html> + <head> + <ViewTransitions handleForms/> + <meta charset="UTF-8" /> + </head> + <body> + <h2>Voting Form</h2> + {Astro.url.search} + <h3>This form does neither have a `method`, nor an `action`, nor an `input` defined</h3> + <form> + <button name="stars" value="1">⭐</button> + <button id="three" name="stars" value="3">⭐⭐⭐</button> + <button name="stars" value="5">⭐⭐⭐⭐⭐</button> + </form> + </body> +</html> diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index c56abae24..fafea3e69 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -1059,4 +1059,16 @@ test.describe('View Transitions', () => { await expect(p, 'should have content').toHaveText('Page 2'); expect(loads.length, 'There should only be 1 page load').toEqual(1); }); + + test('Submitter with a name property is included in form data', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/form-four')); + + let locator = page.locator('h2'); + await expect(locator, 'should have content').toHaveText('Voting Form'); + + // Submit the form + const expected = page.url() + '?stars=3'; + await page.click('#three'); + await expect(page).toHaveURL(expected); + }); }); |