From d38b2a4fe827e956662fcf457d1f1f84832c2f15 Mon Sep 17 00:00:00 2001
From: An Li <kidylee@gmail.com>
Date: Mon, 15 Jan 2024 15:28:40 +0800
Subject: [PATCH] fix(ViewTransition): Disables View Transition form handling
 when the `action` property points to an external URL.(#9674) (#9693)

---
 .changeset/poor-cherries-buy.md                          | 5 +++++
 packages/astro/components/ViewTransitions.astro          | 4 +++-
 .../fixtures/view-transitions/src/pages/form-five.astro  | 9 +++++++++
 packages/astro/e2e/view-transitions.test.js              | 7 +++++++
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/poor-cherries-buy.md
 create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro

diff --git a/.changeset/poor-cherries-buy.md b/.changeset/poor-cherries-buy.md
new file mode 100644
index 000000000000..d14cff15846c
--- /dev/null
+++ b/.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
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
index 05911fca7df4..bf372f15cd39 100644
--- a/packages/astro/components/ViewTransitions.astro
+++ b/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;
 			}
 
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-five.astro
new file mode 100644
index 000000000000..9ff08db424b7
--- /dev/null
+++ b/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>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index 04eab79c1116..0da1010b281e 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/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) => {