disabledにしたボタンの上からすぐ下の要素にマウスポインタを移してもonMouseEnterイベントが起こらない

disabledにしたボタンのすぐ下に、onMouseEnterイベントハンドラを定めた要素が置かれたときに生じる問題です。disabledにしたボタンの上から下の要素の領域にマウスポインタを入れても、onMouseEnterイベントが起こりません。Chromeで確認されました。

GitHubのReactを見ると、まさにそのものズバリのissue(問題)「Bug: MouseEnter does not fire when coming from disabled elements」(2020/07/21)がいまだopen(未解決)のままになっています。マウスイベントの扱いを最適化する際に取りこぼしがあったようで、直すにはあちこちに手を入れなければならないらしいです。

確認のためのコードと対処法

つぎに掲げるのが、問題を確かめるための簡単なコードです。button要素はdisabledとし、そのすぐ下の要素(div)にonMouseEnterとonMouseLeaveのイベントハンドラを定めます。ボタンの上をとおって、下の領域にマウスポインタが入ると、onMouseEnterイベントは起こりません(Chromeの場合)。

function App() {
    const mouseEnterHandler = (event) => {
        console.log('mouse enter');
    };
    const mouseLeaveHandler = (event) => {
        console.log('mouse leave');
    };
    return (
        <div>
            <button disabled>disabledボタン<br />
            この上をとおって下の領域に入る</button>
            <div
                onMouseEnter={mouseEnterHandler}
                onMouseLeave={mouseLeaveHandler}
            >
                onMouseEnter/onMouseLeaveハンドラからコンソール出力
            </div>
        </div>
    );
}

disabledの属性を与えたボタンは基本、マウスイベントを受け取らなくてよいでしょう。だとすると、つぎのように親要素(span)に包んで、マウスイベントをスルーさせれば(pointer-eventsプロパティ値none)、下の要素はonMouseEnterが受け取れます。

<span style={{ pointerEvents: 'none' }}>
    <button disabled>disabledボタン<br />
    親で包んでマウスイベントをスルー</button>
</span>

動きが確かめられるように、テスト用のコードをCodePenに掲げました。左が問題のdisabledボタンです。右のボタンは親に包んでマウスイベントをスルーさせています。

See the Pen React bug: onMouseEnter does not fire when coming from disabled button elements by Fumio Nonaka (@FumioNonaka) on CodePen.