From 61142546715f29952b359fda41f2a47a10309f73 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 23 Jun 2022 18:01:18 +0200
Subject: [PATCH] fix(ui): fix dashboard widget scroll position on change

---
 .../DashboardMetricSelection/DashboardMetricSelection.tsx | 8 ++++++++
 .../Dashboard/components/WidgetWrapper/WidgetWrapper.tsx  | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index a31bd4ffe..e1e2ccd06 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -36,6 +36,7 @@ function DashboardMetricSelection(props: IProps) {
     const [activeCategory, setActiveCategory] = React.useState<any>();
     const [selectAllCheck, setSelectAllCheck] = React.useState(false);
     const selectedWidgetIds = useObserver(() => dashboardStore.selectedWidgets.map((widget: any) => widget.metricId));
+    const scrollContainer = React.useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         dashboardStore?.fetchTemplates(true).then((categories) => {
@@ -43,6 +44,12 @@ function DashboardMetricSelection(props: IProps) {
         });
     }, []);
 
+    useEffect(() => {
+        if (scrollContainer.current) {
+            scrollContainer.current.scrollTop = 0;
+        }
+    }, [activeCategory, scrollContainer.current]);
+
     const handleWidgetCategoryClick = (category: any) => {
         setActiveCategory(category);
         setSelectAllCheck(false);
@@ -100,6 +107,7 @@ function DashboardMetricSelection(props: IProps) {
                     <div
                         className="grid grid-cols-4 gap-4 -mx-4 px-4 pb-40 items-start py-1"
                         style={{ maxHeight: "calc(100vh - 170px)", overflowY: 'auto' }}
+                        ref={scrollContainer}
                     >
                         {activeCategory && activeCategory.widgets.map((widget: any) => (
                             <WidgetWrapper
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index b8e0a44d1..807d43c85 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -5,7 +5,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import WidgetChart from '../WidgetChart';
 import { useObserver } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId, dashboardMetricDetails } from 'App/routes';
 import TemplateOverlay from './TemplateOverlay';
 import AlertButton from './AlertButton';
@@ -26,7 +26,7 @@ interface Props {
     onClick?: () => void;
     isWidget?: boolean;
 }
-function WidgetWrapper(props: Props) {
+function WidgetWrapper(props: Props & RouteComponentProps) {
     const { dashboardStore } = useStore();
     const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, dashboardId, siteId } = props;
     const widget: any = useObserver(() => props.widget);