Handle back navigation from page without VT (#7750)
* Handle back navigation from page without VT * Adding a changeset
This commit is contained in:
parent
29162c99fb
commit
201d32dcfc
3 changed files with 37 additions and 1 deletions
5
.changeset/sixty-peas-join.md
Normal file
5
.changeset/sixty-peas-join.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Trigger full page refresh on back nav from page without VT enabled
|
|
@ -128,7 +128,12 @@ const { fallback = 'animate' } = Astro.props as Props;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
window.addEventListener('popstate', () => {
|
window.addEventListener('popstate', () => {
|
||||||
if (!transitionEnabledOnThisPage()) return;
|
if (!transitionEnabledOnThisPage()) {
|
||||||
|
// The current page doesn't haven't View Transitions,
|
||||||
|
// respect that with a full page reload
|
||||||
|
location.reload();
|
||||||
|
return;
|
||||||
|
}
|
||||||
const nextIndex = history.state?.index ?? currentHistoryIndex + 1;
|
const nextIndex = history.state?.index ?? currentHistoryIndex + 1;
|
||||||
const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
|
const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
|
||||||
navigate(direction, location.href);
|
navigate(direction, location.href);
|
||||||
|
|
|
@ -104,4 +104,30 @@ test.describe('View Transitions', () => {
|
||||||
'There should be 2 page loads. The original, then going from 3 to 2'
|
'There should be 2 page loads. The original, then going from 3 to 2'
|
||||||
).toEqual(2);
|
).toEqual(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('Moving from a page without ViewTransitions w/ back button', async ({
|
||||||
|
page,
|
||||||
|
astro,
|
||||||
|
}) => {
|
||||||
|
const loads = [];
|
||||||
|
page.addListener('load', (p) => {
|
||||||
|
loads.push(p.title());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Go to page 1
|
||||||
|
await page.goto(astro.resolveUrl('/one'));
|
||||||
|
let p = page.locator('#one');
|
||||||
|
await expect(p, 'should have content').toHaveText('Page 1');
|
||||||
|
|
||||||
|
// Go to page 3 which does *not* have ViewTransitions enabled
|
||||||
|
await page.click('#click-three');
|
||||||
|
p = page.locator('#three');
|
||||||
|
await expect(p, 'should have content').toHaveText('Page 3');
|
||||||
|
|
||||||
|
|
||||||
|
// Back to page 1
|
||||||
|
await page.goBack();
|
||||||
|
p = page.locator('#one');
|
||||||
|
await expect(p, 'should have content').toHaveText('Page 1');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Reference in a new issue