From f3caaed7fec92d68529e83f40550b407f215e1e4 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 20 May 2023 11:43:25 -0400
Subject: [PATCH] fix: Scroll notifications to top on open

---
 app/components/Notifications/Notifications.tsx      |  4 ++--
 .../Notifications/NotificationsButton.tsx           | 13 ++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/components/Notifications/Notifications.tsx b/app/components/Notifications/Notifications.tsx
index 4a41aaac3..3ba408f03 100644
--- a/app/components/Notifications/Notifications.tsx
+++ b/app/components/Notifications/Notifications.tsx
@@ -37,7 +37,7 @@ function Notifications(
   const isEmpty = notifications.orderedData.length === 0;
 
   return (
-    <Flex style={{ width: "100%" }} ref={ref} column>
+    <Flex style={{ width: "100%" }} column>
       <Header justify="space-between">
         <Text weight="bold" as="span">
           {t("Notifications")}
@@ -57,7 +57,7 @@ function Notifications(
           </Tooltip>
         </Text>
       </Header>
-      <Scrollable flex topShadow>
+      <Scrollable ref={ref} flex topShadow>
         <PaginatedList
           fetch={notifications.fetchPage}
           items={notifications.orderedData}
diff --git a/app/components/Notifications/NotificationsButton.tsx b/app/components/Notifications/NotificationsButton.tsx
index 4ef21e6e1..0c3df2cb8 100644
--- a/app/components/Notifications/NotificationsButton.tsx
+++ b/app/components/Notifications/NotificationsButton.tsx
@@ -9,7 +9,7 @@ import Notifications from "./Notifications";
 
 const NotificationsButton: React.FC = ({ children }) => {
   const { t } = useTranslation();
-  const focusRef = React.useRef<HTMLDivElement>(null);
+  const scrollableRef = React.useRef<HTMLDivElement>(null);
 
   const popover = usePopoverState({
     gutter: 0,
@@ -17,6 +17,13 @@ const NotificationsButton: React.FC = ({ children }) => {
     unstable_fixed: true,
   });
 
+  // Reset scroll position to the top when popover is opened
+  React.useEffect(() => {
+    if (popover.visible && scrollableRef.current) {
+      scrollableRef.current.scrollTop = 0;
+    }
+  }, [popover.visible]);
+
   return (
     <>
       <PopoverDisclosure {...popover}>{children}</PopoverDisclosure>
@@ -25,11 +32,11 @@ const NotificationsButton: React.FC = ({ children }) => {
         scrollable={false}
         mobilePosition="bottom"
         aria-label={t("Notifications")}
-        unstable_initialFocusRef={focusRef}
+        unstable_initialFocusRef={scrollableRef}
         shrink
         flex
       >
-        <Notifications onRequestClose={popover.hide} ref={focusRef} />
+        <Notifications onRequestClose={popover.hide} ref={scrollableRef} />
       </StyledPopover>
     </>
   );