FYP: fix scroll destination when collapsing
Since FYP is no longer always at the top, we can't use y=0 anymore.
This commit is contained in:
parent
f868e1a3db
commit
fe227ba539
1 changed files with 10 additions and 3 deletions
|
@ -72,6 +72,8 @@ export default function RecommendedPersonal(props: Props) {
|
||||||
doSetClientSetting,
|
doSetClientSetting,
|
||||||
doToast,
|
doToast,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
const ref = React.useRef();
|
||||||
const [markedGid, setMarkedGid] = React.useState('');
|
const [markedGid, setMarkedGid] = React.useState('');
|
||||||
const [view, setView] = React.useState(VIEW.ALL_VISIBLE);
|
const [view, setView] = React.useState(VIEW.ALL_VISIBLE);
|
||||||
const isLargeScreen = useIsLargeScreen();
|
const isLargeScreen = useIsLargeScreen();
|
||||||
|
@ -136,7 +138,7 @@ export default function RecommendedPersonal(props: Props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div ref={ref}>
|
||||||
<SectionHeader title={__('Recommended For You')} icon={ICONS.WEB} onHide={doHideFyp} />
|
<SectionHeader title={__('Recommended For You')} icon={ICONS.WEB} onHide={doHideFyp} />
|
||||||
|
|
||||||
<ClaimList
|
<ClaimList
|
||||||
|
@ -157,12 +159,17 @@ export default function RecommendedPersonal(props: Props) {
|
||||||
setView(VIEW.EXPANDED);
|
setView(VIEW.EXPANDED);
|
||||||
} else {
|
} else {
|
||||||
setView(VIEW.COLLAPSED);
|
setView(VIEW.COLLAPSED);
|
||||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
if (ref.current) {
|
||||||
|
ref.current.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
||||||
|
} else {
|
||||||
|
// Unlikely to happen, but should have a fallback (just go all the way up)
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue