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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<button
    type="button"
    onContextMenu="console.log(123)"
    disabled
>
    Click me
</button>

<!-- end snippet -->

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

I spent a while digging into this. It seems like a bug in Chrome where contextmenu, despite being a type of PointerEvent, fires on disabled elements but only when bubbling.

Here's a JSFiddle without React: https://jsfiddle.net/bpe0yoc6/4/

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Only in chrome does this fire
document.querySelector("#root").addEventListener("contextmenu", (e) => { console.log("contextmenu fired", e.target.tagName) })

document.querySelector("#root").addEventListener("click", (e) => { console.log("click fired", e.target.tagName) })

<!-- language: lang-css -->

#root {
  width: 200px;
  height: 200px;
  display: block;
  background-color: #ccc;
}

<!-- language: lang-html -->

<div id="root">
  <button
      type="button"
      disabled
  >
      Click me
  </button>
</div>

<!-- end snippet -->

React registers event handles at the root of the DOM tree, which is why doing this:

document.querySelector("button").addEventListener("contextmenu", (e) => { ... })

will not fire on the disabled button, and neither will oncontextmenu.

I opened an issue on the Chromium issue tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1421370

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.