Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does React's onContextMenu work in Chrome on disabled elements?

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

like image 855
Robo Robok Avatar asked Sep 03 '25 02:09

Robo Robok


1 Answers

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.

like image 195
Slava Knyazev Avatar answered Sep 04 '25 14:09

Slava Knyazev