CODEWITHSUNDEEP
reactjsprimereact
sb29595
sb29595

Reputation: 21

Primereact tree context menu not hiding after an action

I'm using Primereact's tree along with context menu. After performing an action (a click event on one of the menu items), context menu is not hiding. If I click anywhere on the screen the context menu hides. Here is the code. I'm following the same pattern provided by primereact. Can you help me figure out how to fix this?

DemoPrimeReact.js

import React, {useContext, useEffect, useRef, useState} from 'react';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.css';
import 'primeflex/primeflex.css';
import {Tree} from 'primereact/tree';
// other imports

const DemoPrimeReact = () => {
  // .... other lines skipped
  const [selectedNodeKey, setSelectedNodeKey] = useState(null);
  const contextMenu = useRef(null);

  return (
    <>
      <DemoContextMenu
        contextMenu={contextMenu} setSelectedNodeKey={setSelectedNodeKey}
        //... other props
      />
      <Tree
        value={[withOrWithoutSearchNodes[0]]}
        selectionMode="single" selectionKeys={selectedKey} onSelectionChange={handleSelectionChange}
        onSelect={onNodeSelect} onUnselect={onNodeUnselect}
        expandedKeys={expandedKeys} onToggle={(event) => setExpandedKeys(event.value)}
        contextMenuSelectionKey={selectedNodeKey}
        onContextMenuSelectionChange={(event) => setSelectedNodeKey(event.value)}
        onContextMenu={(event) => contextMenu.current.show(event.originalEvent)}
        dragdropScope="catalog-dnd" onDragDrop={(event) => {
        handleCatalogDragAndDrop(event, setLoading, setCanPaste, loadChildrenOnExpand,
          setSelectedKey, setExpandedKeys, onNodeSelect, setNodes, expandedKeys);
        }}
        onExpand={loadChildrenOnExpand} className={classes.primeTree} nodeTemplate={nodeTemplate}
       />
    </>
  );
}

export default DemoPrimeReact;

DemoContextMenu.js

import React, {useState} from 'react';
import {ContextMenu} from "primereact/contextmenu";

const DemoContextMenu = (props) => {

  const { contextMenu, setSelectedNodeKey } = props;
  
  const menu = [
    {
      label: "Create Library",
      template: (item, options) => {
        return (
          <>
            {
              nodeInfo && (nodeInfo.node.value.entryType === 'M' ||
                nodeInfo.node.value.entryType === 'L') ?
                <span
                  style={{padding: '0 0 0 15px'}}
                  className={options.className}
                >
                  <Button
                    onClick={(event) => handleCatalogAction(event, 'createLibrary')}
                    className={classes.button}
                  >
                    <CreateLibraryIcon style={{color: '#68de86'}} />
                    <span className={classes.item}>Create Library</span>
                  </Button>
                </span> : null
            }
          </>
        );
      },
    }
  ];
  
  return (
    <>
      <ContextMenu
        model={menu}
        ref={contextMenu}
        onHide={() => setSelectedNodeKey(null)}
        className={classes.contextMenu}
      />
    </>
  );
}

export default DemoContextMenu

Upvotes: 0

Views: 1290

Answers (1)

this.srivastava
this.srivastava

Reputation: 1061

I think you can hide the context menu with contextMenu ref using contextMenu.current.state.visible = false;.

You can put this line in handleCatalogAction(...) function at starting. Before you add the above line, you can do console.log(contextMenu); to check for current.state.visible value.

Upvotes: 2

Related Questions