diff --git a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
index c05dd63ac..e9ebab1e8 100644
--- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState, useContext, useRef } from "react";
+import { useEffect, useState, useContext } from "react";
import axiosConfig from "../../../config/axiosConfig";
import { I_Folder, I_Installation } from "../../../util/types";
-import { Alert, Button, CircularProgress, Grid } from "@mui/material";
+import { Alert, CircularProgress, Grid } from "@mui/material";
import { DndProvider } from "react-dnd";
import {
MultiBackend,
@@ -67,7 +67,7 @@ const GroupTree = () => {
tree={tree}
- rootId={-1}
+ rootId={0}
dragPreviewRender={(monitorProps) => (
)}
@@ -94,10 +94,10 @@ const GroupTree = () => {
tree: NodeModel[],
options: DropOptions
) => handleDrop(tree, options)}
- onChangeOpen={(nodes) => {
- console.log(nodes);
- setOpenNodes(nodes);
- }}
+ onChangeOpen={(nodeIds: (number | string)[]) =>
+ setOpenNodes(nodeIds)
+ }
+ initialOpen={openNodes}
/>
{
const isSelected = routeMatch?.params.id === node.data?.id.toString();
const handleToggle = (e: React.MouseEvent) => {
+ setTimeout(
+ () =>
+ document
+ .getElementById(node.id.toString())
+ ?.scrollIntoView({ block: "center" }),
+ 0
+ );
e.stopPropagation();
onToggle(node.id);
};
@@ -46,6 +53,7 @@ const TreeNode = (props: TreeNodeProps) => {
return (