Making a clickable SVG that doesn't trigger a mouseLeave

Question

What I'm trying to do:

when you hover over the row, color changes and a SVG appears
you can click the SVG (currently displays 'clicked' in console) to trigger a function (needs to support triggering external functions too, not just ones that need to be defined inside script tags inside svg, so props functions for example)
when your mouse leaves, the row reverts to original form

Problems:

hovering over the SVG button triggers a mouseLeave (leaves the row) if pointer-events is not set to none. If it is set to none, the SVG button becomes unclickable.
onClick inside SVG doesn't seem to support external functions (props functions for example)

Would appreciate help with this.

const { Container, Row, Col} = ReactBootstrap;
function Library(props){
  
  function handleMouseEnter(e){
    e.style.background = 'blue';
    var targetNode = e.querySelector(`#content`);
    ReactDOM.render(                
      
      , targetNode);
  }
  
  function handleMouseLeave(e){
    e.style.background = '';
    var targetNode = e.querySelector(`#content`);
    ReactDOM.render(                
      "hover over me and click the button!"
      , targetNode);
  }
  
  return(
  
     handleMouseEnter(e.target.closest('.row'))}
    onMouseLeave={e => handleMouseLeave(e.target.closest('.row'))}
    >
      
        
          hover over me and click the button!
                
      
    
  
  )
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

.row{
background:red;
}
svg{
pointer-events:none;
}

user_16746847 · Answer

You can create file .svg and store your svg on that file. example

Icon.svg

And you can render your Icon.svg into your component example:

YourComponent.jsx

import { ReactComponent as Icon } from "./Icon.svg";

const YourComponent = () => {
  return (
    
       console.log('clicked')} />
    
  );
};

export default YourComponent;

and congratulation now you can click your Icon.svg.

in best practice if you wanna import some .svg images you should import as ReactComponent

user_16746847 · Answer

Maybe you can try this using useState for conditional rendering

import { useState } from "react";
import { ReactComponent as Icon } from "./Icon.svg";

const YourApp = () => {
  const [onHover, setOnHover] = useState(false);

  const handleMouseEnter = () => {
    setOnHover(true);
  };
  const handleMouseLeave = () => {
    setOnHover(false);
  };

  return (
    
      {onHover &&  console.log("clicked")} />}
      hover over me and click the button!
    
  );
};

export default YourApp;

user_13351060 · Answer

I think I fixed the problem by editing onMouseLeave to check if the element that triggered it was a SVG or one of it's children, if it is, then count it as a false positive. Now the button is clickable and doesn't disappear if you hover over it.

const { Container, Row, Col} = ReactBootstrap;
function Library(props){
  
  function handleMouseEnter(row){
    row.style.background = 'blue';
    var targetNode = row.querySelector(`#content`);
    ReactDOM.render(                
      
      , targetNode);
  }
  
  function handleMouseLeave(e, row){
    if(e.relatedTarget.tagName === 'svg' || e.relatedTarget.tagName === 'polygon') return
    row.style.background = '';
    var targetNode = row.querySelector(`#content`);
    ReactDOM.render(                
      "hover over me and click the button!"
      , targetNode);
  }
  
  return(
  
     handleMouseEnter(e.target.closest('.row'))}
    onMouseLeave={e => handleMouseLeave(e, e.target.closest('.row'))}
    >
      
        
          hover over me and click the button!
                
      
    
  
  )
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

.row{
background:red;
}

Making a clickable SVG that doesn't trigger a mouseLeave

3 Answers