Question 112318 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – How do I get the current selected item in the TreeView from the context menu?

I need to add a Context Menu to my TreeWiew. I managed to do this with this mui.com's Menu but I don’t know how to get the selected item in the tree where the user did the right click to open the context menu. For example, let’s say the user open the context menu and click on "Copy message" i’d like to know which node the user selected (Calendar, OSS, index.js etc) and do the proper action. I’ve tried looking in the TreeView’s thing like onNodeSelect but it doesn’t fire when you open the context menu over the item.
Currently the code look like this:

export default function FileSystemNavigator() {
  const [contextMenu, setContextMenu] = React.useState<{
    mouseX: number;
    mouseY: number;
  } | null>(null);

  const handleContextMenu = (event: React.MouseEvent) => {
    event.preventDefault();
    setContextMenu(
      contextMenu === null
        ? {
            mouseX: event.clientX + 2,
            mouseY: event.clientY - 6
          }
        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
          // Other native context menus might behave different.
          // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
          null
    );
  };

  const handleClose = () => {
    setContextMenu(null);
  };

  return (
    <div onContextMenu={handleContextMenu} style={{ cursor: "context-menu" }}>
      <TreeView
        aria-label="file system navigator"
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
      >
        <TreeItem nodeId="1" label="Applications">
          <TreeItem nodeId="2" label="Calendar" />
        </TreeItem>
        <TreeItem nodeId="5" label="Documents">
          <TreeItem nodeId="10" label="OSS" />
          <TreeItem nodeId="6" label="MUI">
            <TreeItem nodeId="8" label="index.js" />
          </TreeItem>
        </TreeItem>
      </TreeView>
      <Menu
        open={contextMenu !== null}
        onClose={handleClose}
        anchorReference="anchorPosition"
        anchorPosition={
          contextMenu !== null
            ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
            : undefined
        }
      >
        <MenuItem onClick={handleClose}>Copy Ctrl+C</MenuItem>
        <MenuItem onClick={handleClose}>Delete</MenuItem>
        <MenuItem onClick={handleClose}>Move</MenuItem>
        <MenuItem onClick={handleClose}>Email</MenuItem>
      </Menu>
    </div>
  );
}

Here's a live code example

Tags:

2

Answers


  1. 0

    Since you have only one context menu that have dynamically calculated position based on where right click happened, then you should use event from onContextMenu handler in order to find tree item that was right-clicked.
    For example, when you right click on ‘Application’ node, inside event.target of your handleContextMenu you will find <div class="MuiTreeItem-label">Applications</div> – and you just need to store this piece of information in inner state, and then reuse that same piece of state inside MenuItem click handlers. I assume you can attach some custom attributes, or maybe id to TreeItem, so you can additionally simplify resolver of clicked tree item(to avoid inspecting innerText of HTML div).

    Login or Signup to reply.
  2. 0

    You can achieve this by a small hack – trigger the click event on opening the context menu. That will fire an onNodeSelect callback of the TreeView component.

    export default function FileSystemNavigator() {
  // ...

  const [selectedNodeId, setSelectedNodeId] = React.useState<string | null>(
    null
  );

  const handleContextMenu = (event: React.MouseEvent) => {
    event.target.click();

    event.preventDefault();
    // ...
  };

  const handleNodeSelect = (event, nodeId) => {
    setSelectedNodeId(nodeId);
  };

  return (
    <div onContextMenu={handleContextMenu} style={{ cursor: "context-menu" }}>
      <TreeView
        {/* ... */}
        onNodeSelect={handleNodeSelect}
      ></TreeView>
      <Menu>
        {/* ... */}
        <MenuItem onClick={handleClose}>Delete node {selectedNodeId}</MenuItem>
        {/* ... */}
      </Menu>
    </div>
  );
}

    It will produce the following outcome:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search