From fe227ba5390fcaeab20417fa242d6fca20a811e6 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 22 Mar 2022 09:42:38 +0800
Subject: [PATCH] FYP: fix scroll destination when collapsing

Since FYP is no longer always at the top, we can't use y=0 anymore.
---
 ui/component/recommendedPersonal/view.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui/component/recommendedPersonal/view.jsx b/ui/component/recommendedPersonal/view.jsx
index 928b38d9f..2c7875f83 100644
--- a/ui/component/recommendedPersonal/view.jsx
+++ b/ui/component/recommendedPersonal/view.jsx
@@ -72,6 +72,8 @@ export default function RecommendedPersonal(props: Props) {
     doSetClientSetting,
     doToast,
   } = props;
+
+  const ref = React.useRef();
   const [markedGid, setMarkedGid] = React.useState('');
   const [view, setView] = React.useState(VIEW.ALL_VISIBLE);
   const isLargeScreen = useIsLargeScreen();
@@ -136,7 +138,7 @@ export default function RecommendedPersonal(props: Props) {
   }
 
   return (
-    <>
+    <div ref={ref}>
       <SectionHeader title={__('Recommended For You')} icon={ICONS.WEB} onHide={doHideFyp} />
 
       <ClaimList
@@ -157,12 +159,17 @@ export default function RecommendedPersonal(props: Props) {
                 setView(VIEW.EXPANDED);
               } else {
                 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>
   );
 }