diff --git a/.changeset/new-pets-fail.md b/.changeset/new-pets-fail.md new file mode 100644 index 000000000000..ed791a6a5710 --- /dev/null +++ b/.changeset/new-pets-fail.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Supports `formmethod` and `formaction` for form overrides diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 2e8b93c2f100..089d8d8e554e 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -88,11 +88,14 @@ const { fallback = 'animate', handleForms } = Astro.props; } const form = el as HTMLFormElement; + const submitter = ev.submitter; const formData = new FormData(form); // Use the form action, if defined, otherwise fallback to current path. - let action = form.action ?? location.pathname; + let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname; + const method = submitter?.getAttribute('formmethod') ?? form.method; + const options: Options = {}; - if (form.method === 'get') { + if (method === 'get') { const params = new URLSearchParams(formData as any); const url = new URL(action); url.search = params.toString(); diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro new file mode 100644 index 000000000000..9d27534de8c1 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro @@ -0,0 +1,20 @@ +--- +import Layout from '../components/Layout.astro'; +let formData: FormData | undefined; +if(Astro.request.method === 'POST') { + formData = await Astro.request.formData(); +} +--- + + { + Astro.request.method === 'GET' ? ( +

Contact Form

+
+ + +
+ ) : ( +
Got: {formData?.get('name')}
+ ) + } +
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index ac0af3be2332..20ea8adbc302 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -1004,4 +1004,16 @@ test.describe('View Transitions', () => { 'There should be only 1 page load. No additional loads for the form submission' ).toEqual(1); }); + + test('forms are overridden by formmethod and formaction', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/form-three')); + + let locator = page.locator('h2'); + await expect(locator, 'should have content').toHaveText('Contact Form'); + + // Submit the form + await page.click('#submit'); + const result = page.locator('#three-result'); + await expect(result, 'should have content').toHaveText('Got: Testing'); + }); }); diff --git a/packages/astro/package.json b/packages/astro/package.json index ac93f13fcd19..3470a589d39e 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -186,7 +186,7 @@ }, "devDependencies": { "@astrojs/check": "^0.1.0", - "@playwright/test": "^1.37.1", + "@playwright/test": "1.40.0-alpha-nov-13-2023", "@types/babel__generator": "^7.6.4", "@types/babel__traverse": "^7.20.1", "@types/chai": "^4.3.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 29ceae7f2282..0ca2231f2cf5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -667,8 +667,8 @@ importers: specifier: ^0.1.0 version: 0.1.0(prettier-plugin-astro@0.12.0)(prettier@3.0.3)(typescript@5.1.6) '@playwright/test': - specifier: ^1.37.1 - version: 1.39.0 + specifier: 1.40.0-alpha-nov-13-2023 + version: 1.40.0-alpha-nov-13-2023 '@types/babel__generator': specifier: ^7.6.4 version: 7.6.6 @@ -8061,6 +8061,14 @@ packages: playwright: 1.39.0 dev: true + /@playwright/test@1.40.0-alpha-nov-13-2023: + resolution: {integrity: sha512-qb5AzKN2pf14C4AT90ps3VGbDhx1/9LnzzT+D2TBZQ/vRUUvacvxxhjieelFKvw+FN4BIXFnEs2bNecc37Jyww==} + engines: {node: '>=16'} + hasBin: true + dependencies: + playwright: 1.40.0-alpha-nov-13-2023 + dev: true + /@preact/preset-vite@2.6.0(preact@10.18.1): resolution: {integrity: sha512-5nztNzXbCpqyVum/K94nB2YQ5PTnvWdz4u7/X0jc8+kLyskSSpkNUxLQJeI90zfGSFIX1Ibj2G2JIS/mySHWYQ==} peerDependencies: @@ -14360,6 +14368,12 @@ packages: hasBin: true dev: true + /playwright-core@1.40.0-alpha-nov-13-2023: + resolution: {integrity: sha512-EVClUNNwgSh7y161ACuTQ6ULzb51dgBVbvLSGBd6lBtcb5DZ3gwG6TZLU6UrE4KNSeMxZTBsXlFlrasR6L6G3w==} + engines: {node: '>=16'} + hasBin: true + dev: true + /playwright@1.39.0: resolution: {integrity: sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==} engines: {node: '>=16'} @@ -14370,6 +14384,16 @@ packages: fsevents: 2.3.2 dev: true + /playwright@1.40.0-alpha-nov-13-2023: + resolution: {integrity: sha512-/jHChcF6JXbFaL1YpZvNlXaFDfCJiXPyzooNo4TTp4yUG0vtq0b7r8jSOwmC1AcByIr4tIYkC0nOjn2TjvPlYw==} + engines: {node: '>=16'} + hasBin: true + dependencies: + playwright-core: 1.40.0-alpha-nov-13-2023 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /port-authority@2.0.1: resolution: {integrity: sha512-Hz/WvSNt5+7x+Rq1Cn6DetJOZxKtLDehJ1mLCYge6ju4QvSF/PHvRgy94e1SKJVI96AJTcqEdNwkkaAFad+TXQ==} dev: false