Dashboard: Fixes scrolling issues for Edge browser (#17033)

* Fix: Only set scrollTop on CustomScroll element when it's needed and move arrow functions out of the props

* Fix: Update snapshots

* Minor refactoring to reuse same functions when rendering custom scrollbar

Fixes #16796

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -42,9 +42,10 @@ export class CustomScrollbar extends Component<Props> {
 
   updateScroll() {
     const ref = this.ref.current;
+    const { scrollTop } = this.props;
 
-    if (ref && !isNil(this.props.scrollTop)) {
+    if (ref && !isNil(scrollTop)) {
-      ref.scrollTop(this.props.scrollTop);
+      ref.scrollTop(scrollTop);
     }
   }
 
@@ -70,6 +71,44 @@ export class CustomScrollbar extends Component<Props> {
     this.updateScroll();
   }
 
+  renderTrack = (track: 'track-vertical' | 'track-horizontal', hideTrack: boolean | undefined, passedProps: any) => {
+    return (
+      <div
+        {...passedProps}
+        className={cx(
+          css`
+            visibility: ${hideTrack ? 'none' : 'visible'};
+          `,
+          track
+        )}
+      />
+    );
+  };
+
+  renderThumb = (thumb: 'thumb-horizontal' | 'thumb-vertical', passedProps: any) => {
+    return <div {...passedProps} className={thumb} />;
+  };
+
+  renderTrackHorizontal = (passedProps: any) => {
+    return this.renderTrack('track-horizontal', this.props.hideHorizontalTrack, passedProps);
+  };
+
+  renderTrackVertical = (passedProps: any) => {
+    return this.renderTrack('track-vertical', this.props.hideVerticalTrack, passedProps);
+  };
+
+  renderThumbHorizontal = (passedProps: any) => {
+    return this.renderThumb('thumb-horizontal', passedProps);
+  };
+
+  renderThumbVertical = (passedProps: any) => {
+    return this.renderThumb('thumb-vertical', passedProps);
+  };
+
+  renderView = (passedProps: any) => {
+    return <div {...passedProps} className="view" />;
+  };
+
   render() {
     const {
       className,
@@ -80,8 +119,6 @@ export class CustomScrollbar extends Component<Props> {
       autoHide,
       autoHideTimeout,
       hideTracksWhenNotNeeded,
-      hideHorizontalTrack,
-      hideVerticalTrack,
     } = this.props;
 
     return (
@@ -97,31 +134,11 @@ export class CustomScrollbar extends Component<Props> {
         // Before these where set to inhert but that caused problems with cut of legends in firefox
         autoHeightMax={autoHeightMax}
         autoHeightMin={autoHeightMin}
-        renderTrackHorizontal={props => (
+        renderTrackHorizontal={this.renderTrackHorizontal}
-          <div
+        renderTrackVertical={this.renderTrackVertical}
-            {...props}
+        renderThumbHorizontal={this.renderThumbHorizontal}
-            className={cx(
+        renderThumbVertical={this.renderThumbVertical}
-              css`
+        renderView={this.renderView}
-                visibility: ${hideHorizontalTrack ? 'none' : 'visible'};
-              `,
-              'track-horizontal'
-            )}
-          />
-        )}
-        renderTrackVertical={props => (
-          <div
-            {...props}
-            className={cx(
-              css`
-                visibility: ${hideVerticalTrack ? 'none' : 'visible'};
-              `,
-              'track-vertical'
-            )}
-          />
-        )}
-        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
-        renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
-        renderView={props => <div {...props} className="view" />}
       >
         {children}
       </Scrollbars>

packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
     </p>
   </div>
   <div
-    className="css-17l4171 track-horizontal"
+    className="css-52gpmd track-horizontal"
     style={
       Object {
         "display": "none",
@@ -58,7 +58,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
     />
   </div>
   <div
-    className="css-17l4171 track-vertical"
+    className="css-52gpmd track-vertical"
     style={
       Object {
         "display": "none",

public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap

@@ -212,7 +212,7 @@ exports[`ServerStats Should render table with stats 1`] = `
       </div>
     </div>
     <div
-      className="css-17l4171 track-horizontal"
+      className="css-52gpmd track-horizontal"
       style={
         Object {
           "display": "none",
@@ -233,7 +233,7 @@ exports[`ServerStats Should render table with stats 1`] = `
       />
     </div>
     <div
-      className="css-17l4171 track-vertical"
+      className="css-52gpmd track-vertical"
       style={
         Object {
           "display": "none",

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -61,6 +61,7 @@ export interface State {
   isFullscreen: boolean;
   fullscreenPanel: PanelModel | null;
   scrollTop: number;
+  updateScrollTop: number;
   rememberScrollTop: number;
   showLoadingState: boolean;
 }
@@ -73,6 +74,7 @@ export class DashboardPage extends PureComponent<Props, State> {
     showLoadingState: false,
     fullscreenPanel: null,
     scrollTop: 0,
+    updateScrollTop: null,
     rememberScrollTop: 0,
   };
 
@@ -168,7 +170,7 @@ export class DashboardPage extends PureComponent<Props, State> {
         isEditing: false,
         isFullscreen: false,
         fullscreenPanel: null,
-        scrollTop: this.state.rememberScrollTop,
+        updateScrollTop: this.state.rememberScrollTop,
       },
       this.triggerPanelsRendering.bind(this)
     );
@@ -204,7 +206,7 @@ export class DashboardPage extends PureComponent<Props, State> {
 
   setScrollTop = (e: MouseEvent<HTMLElement>): void => {
     const target = e.target as HTMLElement;
-    this.setState({ scrollTop: target.scrollTop });
+    this.setState({ scrollTop: target.scrollTop, updateScrollTop: null });
   };
 
   onAddPanel = () => {
@@ -251,7 +253,7 @@ export class DashboardPage extends PureComponent<Props, State> {
 
   render() {
     const { dashboard, editview, $injector, isInitSlow, initError } = this.props;
-    const { isSettingsOpening, isEditing, isFullscreen, scrollTop } = this.state;
+    const { isSettingsOpening, isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state;
 
     if (!dashboard) {
       if (isInitSlow) {
@@ -285,9 +287,9 @@ export class DashboardPage extends PureComponent<Props, State> {
         />
         <div className="scroll-canvas scroll-canvas--dashboard">
           <CustomScrollbar
-            autoHeightMin={'100%'}
+            autoHeightMin="100%"
             setScrollTop={this.setScrollTop}
-            scrollTop={scrollTop}
+            scrollTop={updateScrollTop}
             updateAfterMountMs={500}
             className="custom-scrollbar--page"
           >

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

@@ -111,7 +111,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
       autoHideTimeout={200}
       className="custom-scrollbar--page"
       hideTracksWhenNotNeeded={false}
-      scrollTop={0}
+      scrollTop={null}
       setScrollTop={[Function]}
       updateAfterMountMs={500}
     >
@@ -349,7 +349,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
       autoHideTimeout={200}
       className="custom-scrollbar--page"
       hideTracksWhenNotNeeded={false}
-      scrollTop={0}
+      scrollTop={null}
       setScrollTop={[Function]}
       updateAfterMountMs={500}
     >