From 7c5e73a22ba354dd2fada6fa6896bd3a6592a99b Mon Sep 17 00:00:00 2001
From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com>
Date: Thu, 27 Nov 2025 00:19:26 +0100
Subject: [PATCH] fix

---
 .../Data/Browser/DataBrowser.react.js         | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index 5e168a796..1380af1f8 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -169,7 +169,18 @@ export default class DataBrowser extends React.Component {
     this.panelColumnRefs = [];
     this.activePanelIndex = -1;
     this.isWheelScrolling = false;
-    this.multiPanelWrapperRef = React.createRef();
+    this.multiPanelWrapperElement = null;
+    this.setMultiPanelWrapperRef = this.setMultiPanelWrapperRef.bind(this);
+  }
+
+  setMultiPanelWrapperRef(element) {
+    if (this.multiPanelWrapperElement) {
+      this.multiPanelWrapperElement.removeEventListener('wheel', this.handleWrapperWheel);
+    }
+    this.multiPanelWrapperElement = element;
+    if (element && this.state.panelCount > 1 && this.state.syncPanelScroll) {
+      element.addEventListener('wheel', this.handleWrapperWheel, { passive: false });
+    }
   }
 
   componentWillReceiveProps(props) {
@@ -231,18 +242,13 @@ export default class DataBrowser extends React.Component {
   componentDidMount() {
     document.body.addEventListener('keydown', this.handleKey);
     window.addEventListener('resize', this.updateMaxWidth);
-    // Add wheel event listener for multi-panel scrolling
-    if (this.multiPanelWrapperRef.current && this.state.panelCount > 1 && this.state.syncPanelScroll) {
-      this.multiPanelWrapperRef.current.addEventListener('wheel', this.handleWrapperWheel, { passive: false });
-    }
   }
 
   componentWillUnmount() {
     document.body.removeEventListener('keydown', this.handleKey);
     window.removeEventListener('resize', this.updateMaxWidth);
-    // Remove wheel event listener
-    if (this.multiPanelWrapperRef.current) {
-      this.multiPanelWrapperRef.current.removeEventListener('wheel', this.handleWrapperWheel);
+    if (this.multiPanelWrapperElement) {
+      this.multiPanelWrapperElement.removeEventListener('wheel', this.handleWrapperWheel);
     }
   }
 
@@ -314,13 +320,13 @@ export default class DataBrowser extends React.Component {
     const prevNeedsListener = prevState.panelCount > 1 && prevState.syncPanelScroll;
     const nowNeedsListener = this.state.panelCount > 1 && this.state.syncPanelScroll;
 
-    if (prevNeedsListener !== nowNeedsListener && this.multiPanelWrapperRef.current) {
+    if (prevNeedsListener !== nowNeedsListener && this.multiPanelWrapperElement) {
       if (nowNeedsListener) {
         // Add listener
-        this.multiPanelWrapperRef.current.addEventListener('wheel', this.handleWrapperWheel, { passive: false });
+        this.multiPanelWrapperElement.addEventListener('wheel', this.handleWrapperWheel, { passive: false });
       } else {
         // Remove listener
-        this.multiPanelWrapperRef.current.removeEventListener('wheel', this.handleWrapperWheel);
+        this.multiPanelWrapperElement.removeEventListener('wheel', this.handleWrapperWheel);
       }
     }
   }
@@ -1447,7 +1453,7 @@ export default class DataBrowser extends React.Component {
                 {this.state.panelCount > 1 ? (
                   <div
                     className={styles.multiPanelWrapper}
-                    ref={this.multiPanelWrapperRef}
+                    ref={this.setMultiPanelWrapperRef}
                   >
                     {(() => {
                       // Initialize refs array if needed