Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-24 01:18:01 +02:00
Code Issues Projects Releases Wiki Activity

fix(1-3375): Fix unintended scroll on dashboard (#9316)

Browse Source 
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.
This commit is contained in:
Thomas Heartman 2025-02-17 12:07:35 +01:00 committed by GitHub
parent b207606800
commit 134c32589a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/component/personalDashboard/MyFlags.tsx
View File

@ -40,9 +40,10 @@ const FlagListItem: FC<{
useEffect(() => { useEffect(() => {
if (activeFlagRef.current) { if (activeFlagRef.current) {
activeFlagRef.current.scrollIntoView({ activeFlagRef.current.scrollIntoView({
block: 'nearest', block: 'start',
inline: 'start', inline: 'start',
}); });
window.scrollTo({ top: 0 });
} }
}, []); }, []);
const IconComponent = getFeatureTypeIcons(flag.type); const IconComponent = getFeatureTypeIcons(flag.type);

3
frontend/src/component/personalDashboard/MyProjects.tsx
View File

@ -88,9 +88,10 @@ const ProjectListItem: FC<{
useEffect(() => { useEffect(() => {
if (activeProjectRef.current) { if (activeProjectRef.current) {
activeProjectRef.current.scrollIntoView({ activeProjectRef.current.scrollIntoView({
block: 'nearest', block: 'start',
inline: 'start', inline: 'start',
}); });
window.scrollTo({ top: 0 });
} }
}, []); }, []);