From a2f1d2e102b37106bc4b91e0b32be1c41de1373f Mon Sep 17 00:00:00 2001
From: zdg-github <52441803+zdg-github@users.noreply.github.com>
Date: Thu, 24 Nov 2022 18:49:55 +0800
Subject: [PATCH] TraceView: Fix broken rendering when scrolling in Dashboard
 panel in Firefox (#56642)

---
 .../src/TraceTimelineViewer/ListView/index.tsx       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.tsx
index 57bd8f51c92..e7587f0a563 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.tsx
@@ -215,10 +215,20 @@ export default class ListView extends React.Component<TListViewProps> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: TListViewProps) {
     if (this._itemHolderElm) {
       this._scanItemHeights();
     }
+    // When windowScroller is set to false, we can continue to handle scrollElement
+    if (this.props.windowScroller) {
+      return;
+    }
+    // check if the scrollElement changes and update its scroll listener
+    if (prevProps.scrollElement !== this.props.scrollElement) {
+      prevProps.scrollElement?.removeEventListener('scroll', this._onScroll);
+      this._wrapperElm = this.props.scrollElement;
+      this._wrapperElm?.addEventListener('scroll', this._onScroll);
+    }
   }
 
   componentWillUnmount() {