Fix: Use forwardRef for scrollable virtualized tree

CHANGELOG.unreleased.md

@@ -35,6 +35,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Fix that scrolling in the trees and segments tab did not work while dragging. [#8162](https://github.com/scalableminds/webknossos/pull/8162) 
 - Fixed that uploading a dataset which needs a conversion failed when the angstrom unit was configured for the conversion. [#8173](https://github.com/scalableminds/webknossos/pull/8173)
 - Fixed that the skeleton search did not automatically expand groups that contained the selected tree [#8129](https://github.com/scalableminds/webknossos/pull/8129)
+- Fixed interactions in the trees and segments tab like the search due to a bug introduced by [#8162](https://github.com/scalableminds/webknossos/pull/8162). [#8186](https://github.com/scalableminds/webknossos/pull/8186)
 - Fixed a bug that zarr streaming version 3 returned the shape of mag (1, 1, 1) / the finest mag for all mags. [#8116](https://github.com/scalableminds/webknossos/pull/8116)
 - Fixed sorting of mags in outbound zarr streaming. [#8125](https://github.com/scalableminds/webknossos/pull/8125)
 - Fixed a bug where you could not create annotations for public datasets of other organizations. [#8107](https://github.com/scalableminds/webknossos/pull/8107)

frontend/javascripts/oxalis/view/right-border-tabs/scrollable_virtualized_tree.tsx

@@ -1,7 +1,7 @@
 import { Tree as AntdTree, type TreeProps } from "antd";
 import type { BasicDataNode } from "antd/es/tree";
 import { throttle } from "lodash";
-import { useCallback, useRef } from "react";
+import { forwardRef, useCallback, useRef } from "react";
 import type RcTree from "rc-tree";
 
 const MIN_SCROLL_SPEED = 30;
@@ -10,8 +10,10 @@ const MIN_SCROLL_AREA_HEIGHT = 60;
 const SCROLL_AREA_RATIO = 10; // 1/10th of the container height
 const THROTTLE_TIME = 25;
 
-function ScrollableVirtualizedTree<T extends BasicDataNode>(
-  props: TreeProps<T> & { ref: React.RefObject<RcTree> },
+// React.forwardRef does not support generic types, so we need to define the type of the ref separately.
+function ScrollableVirtualizedTreeInner<T extends BasicDataNode>(
+  props: TreeProps<T>,
+  ref: React.Ref<RcTree>,
 ) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   // biome-ignore lint/correctness/useExhaustiveDependencies: biome is not smart enough to notice that the function needs to be re-created when wrapperRef changes.
@@ -56,9 +58,15 @@ function ScrollableVirtualizedTree<T extends BasicDataNode>(
 
   return (
     <div ref={wrapperRef}>
-      <AntdTree {...props} onDragOver={onDragOver} />
+      <AntdTree {...props} onDragOver={onDragOver} ref={ref} />
     </div>
   );
 }
 
+const ScrollableVirtualizedTree = forwardRef(ScrollableVirtualizedTreeInner) as <
+  T extends BasicDataNode,
+>(
+  props: TreeProps<T> & { ref?: React.Ref<RcTree> },
+) => ReturnType<typeof ScrollableVirtualizedTreeInner>;
+
 export default ScrollableVirtualizedTree;

frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.tsx

@@ -1904,7 +1904,7 @@ class SegmentsView extends React.Component<Props, State> {
                                 overflow: "hidden",
                               }}
                             >
-                              <ScrollableVirtualizedTree<SegmentHierarchyNode>
+                              <ScrollableVirtualizedTree
                                 allowDrop={this.allowDrop}
                                 onDrop={this.onDrop}
                                 onSelect={this.onSelectTreeItem}