fix(1-3375): Fix unintended scroll on dashboard #9316
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes a bug where the dashboard would scroll you down from the top of the page on load if your window was too short too see both the selected flag and the selected project. This solves it by immediately scrolling to the top of the page after scrolling your selected element into view. Because this hook only runs on page load, it shouldn't be safe. (At least I couldn't make this misbehave with manual testing). It also changes the list scroll behavior to scroll your selected item to the top of the list instead of to the bottom (effectively). During testing, that seems like a better solution to me. ## Background (or why do we auto-scroll here?) The dashboard's flag and projects panels stores your last selection, so that when you return to the page you'll be shown what you were looking at last. This is especially useful if you have a lot of flags but you're focusing on one in particular. However, if you **do** have a lot of flags, then it's also quite likely that your selection will be "below the fold" of the panel, and you won't see your selected flag/project immediately in the list (without scrolling). It seemed like a nice UI affordance to automatically bring your selected item into view (especially because without it, there's no way to see what flag/project) you're looking at, so I added the [`scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) hook. What I didn't realize, however, is that it scrolls all scrollable ancestor containers, which means that if your screen is too short, it'll scroll you down the page. From my reading of the docs and some local testing, I don't think there is a way to limit the scrolling to only the nearest ancestor, so the easiest way to ensure that we're always at the top seemed to be to just scroll to the immediately after.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.OpenSSF Scorecard
Scanned Files |
thomasheartman
deleted the
fix(1-3375)/unintended-scroll-on-dashboard
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes a bug where the dashboard would scroll you down from the top of
the page on load if your window was too short too see both the
selected flag and the selected project.
This solves it by immediately scrolling to the top of the page after
scrolling your selected element into view. Because this hook only runs
on page load, it shouldn't be safe. (At least I couldn't make this
misbehave with manual testing).
It also changes the list scroll behavior to scroll your selected item
to the top of the list instead of to the bottom (effectively). During
testing, that seems like a better solution to me.
Background (or why do we auto-scroll here?)
The dashboard's flag and projects panels stores your last selection,
so that when you return to the page you'll be shown what you were
looking at last. This is especially useful if you have a lot of flags
but you're focusing on one in particular.
However, if you do have a lot of flags, then it's also quite
likely that your selection will be "below the fold" of the panel, and
you won't see your selected flag/project immediately in the
list (without scrolling).
It seemed like a nice UI affordance to automatically bring your
selected item into view (especially because without it, there's no way
to see what flag/project) you're looking at, so I added the
scrollIntoViewhook.What I didn't realize, however, is that it scrolls all scrollable
ancestor containers, which means that if your screen is too short,
it'll scroll you down the page.
From my reading of the docs and some local testing, I don't think
there is a way to limit the scrolling to only the nearest ancestor, so
the easiest way to ensure that we're always at the top seemed to be to
just scroll to the immediately after.