How to show menu on position of mouse click?-CodePudding

I'm trying to show a custom menu on the position of a mouse click within a div but this doesn't seem to be working, the visible logic is working but when I click on the div, the menu only opens under the Typography. Is the Menu meant to be placed somewhere else?

This is how its showing - menu under Typography, the menu is shown in the same place when clicking on anywhere on the div when it should be on the position of mouse click

The below example is what I currently have, I've removed a lot of code so its easier to read.


interface PositionState {
  x: number;
  y: number;
}

function WebAppTypeCard({
  id,
  name,
  image,
  description,
  image_url,
}: WebAppCardTypeProps) {
  const [visible, setVisible] = useState<boolean>(false);
  const [webApps, setWebApps] = useState<IWebApp[]>([]);
  const [position, setPosition] = useState<PositionState>({ x: 0, y: 0 });

 useEffect(() => {
    fetch(`${process.env.REACT_APP_API_URL}/webapp/read_all/${id}`, {
      headers: headers,
    })
      .then((data) => {
        return data.json();
      })
      .then((res) => {
        setWebApps(res);
      });
  }, []);


  const handleClick = (e: any) => {
    if (webApps.length > 1) {
      setPosition({ x: e.clientX, y: e.clientY }); // <--- on mouse click set position and set visible to true
      console.log(position);
      setVisible(true);
    } else {
      window.open(selectedWALink);
    }
  };

  const handleMouseLeave = () => {
    setVisible(false);
  };

  const style = (x: number, y: number) => {
    return {
      top: x,
      left: y,
    };
  };

  const Menu = () => {
    return (
      <div style={style(position.x, position.y)}>
        {webApps.map((a) => {
          return (
            <div key={a.id} onClick={() => handleMenuClick(a.link)}>
              {a.name}
            </div>
          );
        })}
      </div>
    );
  };

  return (
    // <Tooltip title={description} enterDelay={500} placement="top" arrow>
    <div
      className="cardContainer"
      onm ouseLeave={handleMouseLeave}
      onClick={handleClick}
    >
      <div>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
          }}
        >
          <img
            className="appImg"
            src={image_url}
            width={65}
            height={65}
            style={{ paddingTop: 15 }}
            alt="Image not found"
          />
        </div>
        <div
          style={{
            paddingTop: 10,
            width: 110,
            textAlign: "center",
            marginLeft: 8,
            marginRight: 15,
          }}
        >
          <Typography noWrap variant="body2" gutterBottom>
            {name}
          </Typography>
        </div>
        {visible ? <Menu /> : null} // <---- Show Menu
      </div>
    </div>
    // </Tooltip>
  );
}

export default WebAppTypeCard;

CodePudding user response：

Can't you just set the position to fixed and use CSS's top and left posititioning according to where the user clicked? Then you set the visibility to true when the user clicks and if the visibility already is true, just hide it and on the next click update it's top and left position.

I'm not sure how to do this in react, but this is how I would fix it in Angular!