Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

fix(transitions router): attempt to find the clicked element within an open shadow root (#9685)

Browse source 
* implementation

* add test

* add changeset
This commit is contained in:
Arsh 2024-01-12 20:34:25 +00:00 • committed by GitHub
parent ff3f9a538a
commit 35d54b3ddb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.changeset/weak-planes-help.md Normal file
View file

@ -0,0 +1,4 @@
---
"astro": patch
---
Fixes an issue where anchor elements within a custom component could not trigger a view transition.

3
packages/astro/components/ViewTransitions.astro
View file

@ -53,6 +53,9 @@ const { fallback = 'animate' } = Astro.props;
if (supportsViewTransitions || getFallback() !== 'none') {
document.addEventListener('click', (ev) => {
let link = ev.target;
if (ev.composed) {
link = ev.composedPath()[0];
}
if (link instanceof Element) {
link = link.closest('a, area');
}

5
packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro
View file

@ -12,6 +12,11 @@ import Layout from '../components/Layout.astro';
<a id="click-redirect-two" href="/redirect-two">go to redirect 2</a>
<a id="click-redirect-external" href="/redirect-external">go to a redirect external</a>
<a id="click-404" href="/undefined-page">go to undefined page</a>
<custom-a id="custom-click-two">
<template shadowrootmode="open">
<a href="/two">go to 2</a>
</template>
</custom-a>
<div id="test">test content</div>
</Layout>

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

@ -1206,4 +1206,18 @@ test.describe('View Transitions', () => {
expect(loads.length, 'There should only be 1 page load').toEqual(1);
});
test('custom elements can trigger a view transition', async ({ page, astro }) => {
const loads = [];
page.addListener('load', (p) => {
loads.push(p.title());
});
await page.goto(astro.resolveUrl('/one'));
await expect(page.locator('#one'), 'should have content').toHaveText('Page 1');
// go to page 2
await page.click('#custom-click-two');
await expect(page.locator('#two'), 'should have content').toHaveText('Page 2');
expect(loads.length, 'There should only be 1 page load').toEqual(1);
});
});