Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

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

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

* better check
This commit is contained in:
Martin Trapp 2024-04-17 11:56:31 +02:00 committed by GitHub
parent 347bdfe550
commit dc74afca9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 67 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/itchy-donuts-destroy.md Normal file
View file

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

26
packages/astro/e2e/fixtures/view-transitions/src/pages/persist-1.astro Normal file
View file

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

17
packages/astro/e2e/fixtures/view-transitions/src/pages/persist-2.astro Normal file
View file

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

17
packages/astro/e2e/view-transitions.test.js
View file

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

4
packages/astro/src/transitions/router.ts
View file

@ -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;
}
}
};