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

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: open a new tab for `<form target="_blank">` and `<button formtarget="_blank"> submissions

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;

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>

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"]';