From a233f53f28fcb4c3ea63d2faf156fba09a18456c Mon Sep 17 00:00:00 2001
From: Tee Ming <chewteeming01@gmail.com>
Date: Wed, 25 Sep 2024 23:33:39 +0800
Subject: [PATCH] fix: allow native form submission for `<form
 target="_blank">` and `<button formtarget="_blank">` (#11936)

* add fix and test

* changeset

* more generous timeout

* larger timeout

* larger timeouttttttt

* Update packages/kit/src/runtime/client/client.js
---
 .changeset/great-cooks-hunt.md                |  5 ++++
 packages/kit/src/runtime/client/client.js     |  4 +++
 .../routing/form-target-blank/+page.svelte    |  7 +++++
 .../basics/test/cross-platform/client.test.js | 28 +++++++++++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 .changeset/great-cooks-hunt.md
 create mode 100644 packages/kit/test/apps/basics/src/routes/routing/form-target-blank/+page.svelte

diff --git a/.changeset/great-cooks-hunt.md b/.changeset/great-cooks-hunt.md
new file mode 100644
index 000000000000..43c9b8b2344f
--- /dev/null
+++ b/.changeset/great-cooks-hunt.md
@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: open a new tab for `<form target="_blank">` and `<button formtarget="_blank"> submissions
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
index f828720b88c0..d692e9cd6fa0 100644
--- a/packages/kit/src/runtime/client/client.js
+++ b/packages/kit/src/runtime/client/client.js
@@ -2142,6 +2142,10 @@ function _start_router() {
 
 		const submitter = /** @type {HTMLButtonElement | HTMLInputElement | null} */ (event.submitter);
 
+		const target = submitter?.formTarget || form.target;
+
+		if (target === '_blank') return;
+
 		const method = submitter?.formMethod || form.method;
 
 		if (method !== 'get') return;
diff --git a/packages/kit/test/apps/basics/src/routes/routing/form-target-blank/+page.svelte b/packages/kit/test/apps/basics/src/routes/routing/form-target-blank/+page.svelte
new file mode 100644
index 000000000000..ea735179005e
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/routing/form-target-blank/+page.svelte
@@ -0,0 +1,7 @@
+<form target="_blank">
+	<button>Inside form</button>
+</form>
+
+<form id="my-form"></form>
+
+<button formtarget="_blank" form="my-form">Outside form</button>
diff --git a/packages/kit/test/apps/basics/test/cross-platform/client.test.js b/packages/kit/test/apps/basics/test/cross-platform/client.test.js
index 6d367cf414c6..b8f485fc228d 100644
--- a/packages/kit/test/apps/basics/test/cross-platform/client.test.js
+++ b/packages/kit/test/apps/basics/test/cross-platform/client.test.js
@@ -769,6 +769,34 @@ test.describe('Routing', () => {
 		expect(await page.textContent('h3')).toBe('bar');
 	});
 
+	test('responds to <form target="_blank"> submission with new tab', async ({ page }) => {
+		await page.goto('/routing/form-target-blank');
+
+		let tabs = page.context().pages();
+		expect(tabs.length === 1);
+
+		const new_tab = page.waitForEvent('popup', { timeout: 1000 });
+		await page.locator('button', { hasText: 'Inside form' }).click();
+		await new_tab;
+
+		tabs = page.context().pages();
+		expect(tabs.length > 1);
+	});
+
+	test('responds to <button formtarget="_blank" submission with new tab', async ({ page }) => {
+		await page.goto('/routing/form-target-blank');
+
+		let tabs = page.context().pages();
+		expect(tabs.length === 1);
+
+		const new_tab = page.waitForEvent('popup', { timeout: 1000 });
+		await page.locator('button', { hasText: 'Outside form' }).click();
+		await new_tab;
+
+		tabs = page.context().pages();
+		expect(tabs.length > 1);
+	});
+
 	test('ignores links with no href', async ({ page }) => {
 		await page.goto('/routing/missing-href');
 		const selector = '[data-testid="count"]';