I have a button in my React application. This button is working as intended on the web application, but when I open the app on my Iphone in Chrome, the button requires 2 taps to work. The first click is to trigger the hover effect, and the second is to trigger the onClick effect. I have 2 svg files – one for the hovered state and unhovered state. The svg image will render based on the isHover value. Any help is appreciated!
Here are my codes:
const OptionsButton: FC<Props> = ({
disabled=false,
className="options-button",
onClick,
style={cursor:'pointer',height:'34',width:'34',bottom:'15', right:'15',position:'absolute' }
}) => {
const [isHover, setIsHover] = useState(false);
const handleMouseEnter = () => {
setIsHover(true);
}
const handleMouseLeave = () => {
setIsHover(false);
}
const handleClick = (e : React.MouseEvent<HTMLButtonElement>) => {
onClick(e);
e.stopPropagation();
}
return (
<>
{
( isHover )?
<OptionsBtnPr
className = {className}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
style={style}
/> :
<OptionsBtn
className = {className}
onMouseEnter={handleMouseEnter}
onClick={handleClick}
style={style}
/>
}
</>
)
}