fix(ViewTransition): Disables View Transition form handling when the action property points to an external URL.(#9674) (#9693)

Author: kidylee

.changeset/poor-cherries-buy.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Disables View Transition form handling when the `action` property points to an external URL

packages/astro/components/ViewTransitions.astro

@@ -109,7 +109,9 @@ const { fallback = 'animate' } = Astro.props;
 
 			// the "dialog" method is a special keyword used within <dialog> elements
 			// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-method
-			if (method === 'dialog') {
+			if (method === 'dialog' || location.origin !== new URL(action, location.href).origin) {
+				// No page transitions in these cases,
+				// Let the browser standard action handle this
 				return;
 			}
 

packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro

@@ -0,0 +1,9 @@
+---
+import Layout from '../components/Layout.astro';
+
+---
+<Layout>
+	<form action="https://example.com/" method="POST">
+		<button id="submit">Submit</button>
+	</form>
+</Layout>

packages/astro/e2e/view-transitions.test.js

@@ -932,6 +932,13 @@ test.describe('View Transitions', () => {
 		).toEqual(1);
 	});
 
+	test('form POST that action for cross-origin is opt-out', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/form-five'));
+		page.on('request', (request) => expect(request.method()).toBe('POST'));
+		// Submit the form
+		await page.click('#submit');
+	});
+
 	test('form GET that redirects to another page is handled', async ({ page, astro }) => {
 		const loads = [];
 		page.addListener('load', async (p) => {