Trying to display label conditionally on hover.

[dipin-anand]

Hi, I am trying to display the label component conditionally onHover. But as soon as I hover over the displayed label element which is a button, it keeps triggering the onMouseEnter and onMouseLeave which keeps changing the onHoverState. Since the button component(label) is a child of the svg, it should have ideally not triggered the state changes. I have tried stop propogation and prevent default but nothing seems to work. Here is a code snippet.

const App = () => {
  const [isHovering, setIsHovering] = useState(false);
  console.log(isHovering);

  return (
    <div
      style={{
        height: "500px",
        margin: "50px",
      }}
    >
      <ArcherContainer strokeColor="red">
        <div style={rootStyle}>
          <ArcherElement
            id="root"
            relations={[
              {
                targetId: "element2",
                targetAnchor: "top",
                sourceAnchor: "bottom",
                style: {
                  strokeDasharray: "5,5",
                  strokeColor: isHovering ? "green" : "blue",
                },

                label: (
                  <>
                    {isHovering && (
                      <Box width="100px" height={"100px"}>
                        <IconButton aria-label="delete" color="primary">
                          <DeleteIcon />
                        </IconButton>
                      </Box>
                    )}
                  </>
                ),

                domAttributes: {
                  // The hovering style could be achieved with CSS as well
                  onDoubleClick: () => {
                    console.log("you focused me!");
                  },
                  onMouseEnter: (e) => {
                    e.preventDefault();
                    e.stopPropagation();

                    setIsHovering(true);
                  },
                  onMouseLeave: (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    setIsHovering(false);
                  },
                  // The click however needs a props, obviously
                  onClick: () => {
                    // setIsHovering(true);
                  },
                  onKeyDown: (e: React.KeyboardEvent) => {
                    console.log(e);
                  },
                },
                hitSlop: 30,
                cursor: "grab",
              },
            ]}
          >
            <div style={boxStyle}>Hover my arrow</div>
          </ArcherElement>
        </div>

        <div style={rowStyle}>
          <ArcherElement
            id="element2"
            relations={[
              {
                targetId: "element3",
                targetAnchor: "left",
                sourceAnchor: "right",
                style: {
                  strokeColor: "blue",
                  strokeWidth: 1,
                },
                label: (
                  <div
                    style={{
                      marginTop: "-20px",
                    }}
                  >
                    Arrow 2
                  </div>
                ),
              },
            ]}
          >
            <div style={boxStyle}>Element 2</div>
          </ArcherElement>

          </div>
      </ArcherContainer>
    </div>
  );
};