Unable to display menu on right click react-big-calendar

Question

I am trying to display menu on right click with react-big-calendar and material ui, the issue that menu isnt display correctly on html its going on top right corner, My code is:

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
return (
    <>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={() => redirectToEvent(selectedEvent)}>
          <ImportContactsTwoToneIcon
            color="primary"
            style={{ marginLeft: "15px" }}
          />{" "}
          פתח אירוע
        </MenuItem>
      
      </Menu>
 <Calendar
        localizer={localizer}
        events={events}
        step={60}
        views={["month", "day"]}
        onSelectEvent={(event, e) => {
        
          redirectToEvent(event);
        }}
        components={
          {
            eventWrapper: ({ event, children }) => (
              <div
                onContextMenu={
                  e => { 
                    setSelectedEvent(event);
                  
                //think this is the issue
                   setAnchorEl(e);
                
                    e.preventDefault();
                  }
                }
              >
                {children}
              </div>
            )
          }
        }

score 1 · Answer 1 · answered Oct 06 '21 at 19:46

Material-UI has an example of providing a Context Menu, and it doesn't seem to use an anchorEl prop, or take the bare 'event' target object, placing a different object in state.

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu(
      contextMenu === null
        ? {
            mouseX: event.clientX - 2,
            mouseY: event.clientY - 4,
          }
        : // 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);
  };

From that part of the example, it would seem you need to update your onContextMenu accordingly. Since you're setting multiple state values for your menu, both for it's positioning and the referenced selectedEvent, you may want to use a reducer for state instead.

Then, on the <Menu> itself, it also mutates that state.

<Menu
  open={contextMenu !== null}
  onClose={handleClose}
  anchorReference="anchorPosition"
  anchorPosition={
    contextMenu !== null
    ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
    : undefined
  }
>
// menu items
</Menu>

And, since you've placed the <Menu> inside of your <Calendar>'s container object, what sort of styling is on your container and could that effect it's layout as well? (I don't know if Material-UI automatically portals it's menu in this scenario or not)

Unable to display menu on right click react-big-calendar

1 Answers1