Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Adds missing name/value of the submit button to the form data of a view transition (#9248)

Browse source 
* 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>
This commit is contained in:
Martin Trapp 2023-12-01 18:55:22 +01:00 committed by GitHub
parent 3cbd8ea753
commit 43ddb52176
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/ninety-weeks-juggle.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Adds properties of the submit button (name, value) to the form data of a view transition

3
packages/astro/components/ViewTransitions.astro
View file

@ -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;

20
packages/astro/e2e/fixtures/view-transitions/src/pages/form-four.astro Normal file
View file

@ -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>

12
packages/astro/e2e/view-transitions.test.js
View file

@ -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);
});
});