<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>

<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>

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');

if (typeof start === 'number') activeElement.selectionStart = start;

if (typeof end === 'number') activeElement.selectionEnd = end;