Comments (5)
We are also having a problem with Turbo on anchor links and I believe related to this issue as well.
Say we have two pages with routes, /page-a
and /page-b
. And page A has an anchor link /page-a/#anchor
. If on page A we click on the link that navigates to #anchor
, page A is refetched, page scrolls to top and then scrolls to anchor which is quite unexpected.
If I disable default behaviour on the anchor link trigger with e.preventDefault()
then we have another problem with history.
- Go to page A and click the link that points to the anchor link.
- Page scrolls to the anchor point and URL updates as
/page-a/#anchor
. - Navigate to Page B. Page B loads and url is updated as
/page-b
. - Now click history
back
button of the browser. Url updates as/page-a/#anchor
but navigation fails. We stay at page B.
I guess a method mentioned above pushHistoryWithLocationAndRestorationIdentifier
would solve our problem for the second scenario.
Or #125 should fix our issue I believe.
Is there any workaround until a fix is released?
from turbo.
I tested skip-link
branch with our app and it fixes the problem I described above with one exception. We do not use caching as it seems to introduce various issues for our app that uses Vue.js heavily. So the problem is, when caching is disabled, navigation between anchors on the same page using history buttons, results in refetching the page thus introducing scroll to top then to anchor issue.
For example:
- Go to
/page-a
. Click/page-a/#anchor-1
, then click/page-a/#anchor-2
. - Click browser history back then forward buttons.
On each restoration visit to anchors on the same page, page is refetched, browser scrolls to top, then scrolls to the anchor point.
I'm happy to open a new issue, if you think this should be handled separately.
Edit: Just sent a PR fixing this problem.
from turbo.
@cwgw I've opened #57 to add test coverage to ensure the correct behavior, but I'm unable to reproduce the issue.
Could you comment on that PR to help me craft the correct HTML and test coverage to fail the test?
EDIT: I commented too soon, I was able to get a failing test, but could still use some guidance on whether or not it faithfully reproduces the scenario detailed within this issue.
from turbo.
@seanpdoyle Thanks for your response. I'm happy to assist with test coverage.
Just to clarify a bit: The issue is not with window location or scroll position but with focus navigation. The html spec says that…
User agents are required to set the sequential focus navigation starting point to the target element when navigating to a fragment.
…and this is the normal behavior that Turbo Drive is preventing. Currently, after navigating to a fragment, the sequential focus navigation starting point is set to the top of page, rendering the skip link useless.
To cover this in a test, you'd need to:
- trigger a click on the skip link
- trigger a tab keypress
- assert that the correct element receives focus (which should be the first focusable element within or after the target element)
from turbo.
After some more investigation, I'm seeing unique behavior in Chrome. In Firefox and Safari the issue is present as I've described it above.
In Chrome, the focus navigation is set correctly after using the skip link once. However, the issue presents after using the skip link additional times.
FWIW I'm running:
from turbo.
Related Issues (20)
- Turbo doesn't send Turbo-Frame header when frame's src is updated HOT 13
- Morphing: impossible to "clear" a form due to ignoreActiveValue: true HOT 9
- Morphing overwrites the user's input on active element HOT 4
- Turbo 8 link advance with frame and temporary not render
- Progress bar does not disappear after fast network response HOT 2
- Turbo 8 data-turbo-action=advance and turbo stream replaces head section HOT 2
- InstaClick does not work when use frame to same page
- Turbo stream refresh takes precedence over user interaction HOT 3
- Turbo morph not preserving stimulus values HOT 1
- Turbo morph displays progress bar HOT 2
- [QUESTION] Plans for turbo handle routes? HOT 1
- Using data-turbo-action="advance" to update URL breaks morphing
- Refresh events for individual frames HOT 6
- turbo_frame_tag src: format: turbo_stream call back refresh morph.
- `turbo:before-fetch-response` not always fired on link HOT 1
- Make turbo progress bar optional HOT 1
- Redirect after form success HOT 1
- Adding SVG subelements via Turbo Streams leads to them not being rendered HOT 2
- Stimulus does not always disconnect and reconnect when morphing HOT 1
- [Breaking changes] Turbo 8: Scroll position is lost on render when an ID is duplicated in the page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from turbo.