-
-
Notifications
You must be signed in to change notification settings - Fork 494
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Opt out scrolling upon a hash change #1105
feat: Opt out scrolling upon a hash change #1105
Conversation
Hi! Can we also add a similar configuration flag to your PR that allows you to scroll to the hash smoothly? And can you tell me why your PR hasn't been reviewed yet? |
Been going through our open PRs, and regarding this one, I've got a question about why this implementation is required. This functionality can be achieved using the In this case, you could use to opt-out of a hash change triggering the scroll restoration. <ScrollRestoration
getKey={location => {
return [location.pathname, location.search].join(",")
}}
/> Perhaps, we can include a section in the Scroll Restoration documentation on some popular recipes for using the |
Thanks for the thoughtful consideration!
It looks like in your comment you are proposing a way to use the Thanks for pointing me towards the I.e., using the useElementScrollRestoration(
getElement() { return document.getElementById(router.location.hash) }
getKey(location) { return [location.pathname, location.search, location.hash].join(",") }
) However, this would present the following difficulties vs. adding a new router configuration option:
|
I believe I'm understanding what you are going for. But I'm a bit hesitant about widening our API surface unless we absolutely need to and as such I want to make sure we've covered the alternates before moving to adding a new piece of configuration to the Router as well as how it'd play along with the existing implementation and Especially since something like scroll restoration behaviour could/would eventually need to become a per-route based configuration option as people start exploring this avenue. With that in mind:
I've tweaked the I hope the tweaked example helps you understand my hesitancy here. |
AH, now I understand your motivations. I'm certainly motivated by an edge case where the code performing external hash changes is completely outside my own codebase, so I definitely own that that's an edge case that TS router shouldn't design around. Others are liking and thumbs upping this idea still, so I'm wondering the other use-cases that are motivating folks. I'll play around with the Scroll restoration API as is if there's any way for it to override the "hard coded" hash scrolling behavior. What I suspect is that the way the opinion is so hard coded into the Provider, that there will be scroll conflicts. Perhaps then, an alternative is to have the Provider defer to the location key as a source of truth vs the hash 🤔. Will play around, and work on top of assumption that the user desires the "update history" behavior and has it in their control, vs my current assumption of it being externally controlled and rigid. |
I have followed up in the related issue with a call for more concrete use cases where the current default scroll behavior is problematic |
@elliottgrieco-toast pinging for a checkup. Checking the original discussion thread, discussions, and Discord questions, I haven't seen any movement on the need for this. For navigation controlled outside of React, the people seem to be fine with consuming the |
Agreed -- an attempt was made; I'm ready to close this issue at your discretion. |
Closing this for now because of the discussion above. Thanks for the contribution, @elliottgrieco-toast! Appreciate your understanding on this. |
Discussion as a feature in #1155
Adds ability to opt out of behavior where the router (specifically, the DOM/UI library implementation) handles scrolling to hash element matching the current hash history.
I am driven to add this new router option because I am currently working with an existing code-base which controls the current router hash location based on the browser's current scroll position.
A minimum reproduction case where the
scrollIntoView
behavior conflicts with the desired behavior to control the router location externally is located at:https://stackblitz.com/edit/tanstack-router-cyyfgk?file=src%2Fmain.tsx