ContextMenu Rename and Delete

[dorakadri]

i want to make a delete and rename with a contextMenu so in my node component im doing this so im storing the node.id all fine till here

 <Flex
          gap={2}
          align="center"
          justifyContent={"space-between"}
          w="100%"
          h="100%"
          cursor={"pointer"}
          onClick={() => node.toggle()}
          onContextMenu={(e) => {
            e.preventDefault();

            dispatch(
              setContextMenuPoint({
                nodeid: node.id,
                x: e.pageX,
                y: e.pageY,
              })
            );
          }}
        >  

here im getting the id and i want to turn the node to edit mode but doesnt work :'(

function FileTree() {
  const [term, setTerm] = useState("");
  const treeRef = useRef<TreeApi<TreeNodeType> | null>(null);
  const treedata = useAppSelector(gettreedata);
  const selectedfile = useAppSelector(getselectedfile);
  const dispatch = useAppDispatch();
  const memoizedChildren = useMemo(() => [treedata], [treedata]);
  const ContextMenuState = useAppSelector(getcontextmenu);

  return (
    <>
      {memoizedChildren && (
        <div>
          <Tree
            ref={treeRef}
            data={memoizedChildren}
            width={"100%"}
            height={1000}
            indent={13}
            selection={selectedfile.id}
            onSelect={(node) => {
              for (let n of node) {
                console.log(n.parent?.data);

                if (n.isLeaf)
                  dispatch(
                    updataselectedfile({
                      name: n.data.name,
                      id: n.data.id,
                      path: n.data.path,
                    })
                  );
              }
            }}
            rowHeight={32}
            searchTerm={term}
            searchMatch={(node, term) =>
              node.data.name.toLowerCase().includes(term.toLowerCase())
            }
          >
            {Node}
          </Tree>

          <ContextMenu
            top={ContextMenuState.points.y}
            left={ContextMenuState.points.x}
          >
            <MenuItem
              fontSize={"small"}
              onClick={async () => {
                console.log(treeRef?.current);
                treeRef?.current?.get(ContextMenuState.points.nodeid);
                if (treeRef?.current?.get(ContextMenuState.points.nodeid)) {
                  await treeRef?.current
                    ?.get(ContextMenuState.points.nodeid)
                    ?.edit();
                }
              }}
            >
              Rename
            </MenuItem>
            <MenuItem fontSize={"small"}>Delete</MenuItem>
          </ContextMenu>
        </div>
      )}
    </>
  );
}

export default FileTree;

can any one help me please <3

[dorakadri]

lil update i figured it out the problem was this : the on blur

     {node.isEditing ? (
              <Input
                type="text"
                defaultValue={node.data.name}
                onFocus={(e) => e.currentTarget.select()}
                onBlur={() => node.reset()}
                autoFocus
              />
            ) : (
              <div>
                <Text variant={"TreeItemText"}> {node.data.name}</Text>
              </div>
            )}

well feel free to use this code if you want to implement a contextMenu