Fixes an issue with persisted non-text input fields that have the focus during view transition navigation. (#10799)

* Fixes an issue with persisted non-text input fields that have the focus during view transition navigation.

* better check

Author: martrapp

.changeset/itchy-donuts-destroy.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes an issue with persisted non-text input fields that have the focus during view transition navigation.

packages/astro/e2e/fixtures/view-transitions/src/pages/persist-1.astro

@@ -0,0 +1,26 @@
+---
+import Layout from '../components/Layout.astro';
+---
+<Layout>
+	<p id="one">Persist 1</p>
+	<form transition:persist="form" action="/persist-2">
+		<input type="text" name="name" />
+		<input type="checkbox" />
+	</form>
+	<div id="test">test content</div>
+</Layout>
+<script>
+	const input = document.querySelector<HTMLInputElement>("form input")!;
+	input.focus();
+	input.value = "some cool text";
+	input.selectionStart=5;
+	input.selectionEnd=9;
+
+	document.addEventListener('astro:after-swap', () => {
+		const textInput = document.querySelector<HTMLInputElement>("form input:first-of-type")!;
+		console.log(textInput === document.activeElement, textInput.value, textInput.selectionStart, textInput.selectionEnd);
+		const checkBox = document.querySelector<HTMLInputElement>("form input:nth-of-type(2)")!;
+		checkBox.checked = true;
+		checkBox.focus();
+	}, {once:true});
+</script>

packages/astro/e2e/fixtures/view-transitions/src/pages/persist-2.astro

@@ -0,0 +1,17 @@
+---
+import Layout from '../components/Layout.astro';
+---
+<Layout>
+	<p id="two">Persist 2</p>
+	<a id="click-persist-one" href="/persist-1">go to 3</a>
+	<div transition:persist="form"/>
+	<div id="test">test content</div>
+</Layout>
+<script>
+	document.addEventListener('astro:after-swap', () => {
+		const checkBox = document.querySelector<HTMLInputElement>("form input:nth-of-type(2)")!;
+		console.log(checkBox === document.activeElement, checkBox.checked);
+	}, {once:true});
+</script>
+
+

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

@@ -1403,3 +1403,20 @@ test.describe('View Transitions', () => {
 		).toEqual(0);
 	});
 });
+
+test('transition:persist persists selection', async ({ page, astro }) => {
+	let text = "";
+	page.on('console', (msg) => {
+		text=msg.text();
+	});
+	await page.goto(astro.resolveUrl('/persist-1'));
+	await expect(page.locator('#one'), 'should have content').toHaveText('Persist 1');
+	// go to page 2
+	await page.press('input[name="name"]', 'Enter');
+	await expect(page.locator('#two'), 'should have content').toHaveText('Persist 2');
+	expect(text).toBe('true some cool text 5 9');
+
+	await page.goBack();
+	await expect(page.locator('#one'), 'should have content').toHaveText('Persist 1');
+	expect(text).toBe('true true');
+});

packages/astro/src/transitions/router.ts

@@ -305,8 +305,8 @@ async function updateDOM(
 				activeElement instanceof HTMLInputElement ||
 				activeElement instanceof HTMLTextAreaElement
 			) {
-				activeElement.selectionStart = start!;
-				activeElement.selectionEnd = end!;
+				if (typeof start === 'number') activeElement.selectionStart = start;
+				if (typeof end === 'number') activeElement.selectionEnd = end;
 			}
 		}
 	};