All the events on the Article: onMouseMove, onMouseDown etc. are correctly executed. But onClick don't. I can see the button but clicking in it nothing happens.
const onDelete = () => {
console.log('delete')
};
return (
<>
{show &&
<Ul style={{top: pos.y, left: pos.x}}>
<Li>
<Button onClick={onDelete}>
<Trash /> Delete
</Button>
</Li>
</Ul>
}
<Article ref={ref} onContextMenu={onRightClick}
onMouseMove={onMouseMove} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave}
>
{children}
</Article>
</>
);
If I move the code in brackets to inside Article, onClick is fired but the style of Ul doesn't work properly. I have other components that execute events correctly being inside brackets. But for some reason this component only executes the events in the Article.
I found the answer. I had another function that closes that button when I click outside the button (using ref). But when I clicked in button that function was fired because I was using same ref. I just had to use another ref and worked!!!
useClickOutside(ref2, () => setShow(false));
const onDelete = () => {
console.log("delete");
};
return (
<>
{show &&
<Ul style={{top: pos.y, left: pos.x}}>
<Li>
<Button ref={ref2} onClick={onDelete}>
<Trash /> Delete
</Button>
</Li>
</Ul>
}
<Article ref={ref} onContextMenu={onRightClick}
onMouseMove={onMouseMove} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave}
>
{children}
</Article>
</>
);
Try this:
onClick={() => onDelete()}