I found something very strange. In all major browsers, context menu event doesn't work on disabled elements, so this wouldn't print to console:
<button
type="button"
onContextMenu="console.log(123)"
disabled
>
Click me
</button>
But it's a little different with React. I tried to do the same thing through React component:
const MyComponent = () => (
<button
type="button"
onContextMenu={() => console.log(123)}
disabled
>
Click me
</button>
);
This time, in Chrome it prints to the console, but in other browsers it does not. For educational purpose, I'm trying to understand what is the difference between HTML's onContextMenu
and React's onContextMenu
plus why only Chrome handles it differently. Super weird.
Reproduced in Codesandbox
According to Chromium, this is intentional. See the issue tracker.
This is an intentional change and matches what firefox nightly, who also implemented the new behavior, is doing.
I have temporarily disabled the new behavior due to other issues, but I will re-enable it soon.
The disabled attribute is only supposed to block click events, not contextmenu events. Can you just call preventDefault() on the contextmenu event?
Sounds like an explicit check is now required.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With