🤯
HTMLの dialog と popover を一緒に使うと popover をクリックできなくなる問題
概要
HTML の dialog を表示してから popover を表示すると、popover に対してマウスのイベントが全く伝わらなくなってしまう。
これを解決するには、popover の要素を dialog の中に入れるしかない。
dialog を表示した後に popover を表示すれば、外側の popover も見た目上は dialog の::backdrop の上に表示されている。
ブラウザのバグだとしか思えないが、Chromium だけでなく Firefox も Safari も同じ挙動。
仕様なのか…!?
実装
React でやろうとすると、かなりややこしい実装が必要になる。
表示している dialog の id を context に保持しておき、今トップに表示されている dialog と一致してる場合にのみ popover を表示している。
同じ popover がいくつも重なって表示されてしまっても問題ない場合は、全ての dialog 内に popover を表示するだけでも良い。
これに表示アニメーションも一緒にやろうとするとさらにややこしくなり、各 popover の状態管理も context 内でやる必要がある。
感想
これバグですよね？
ちなみに
同じことを書いている人がいた
確かに公式リファレンスを見てみると…
ダイアログの外の操作はブロックされ、ダイアログの外のコンテンツは不活性にレンダリングされます。
いやいやいや…確かに書いてあるけど
外側って DOM 構造の外の全てってことで本当に合ってますか…？
最上位レイヤーっていう概念があるけど、それは関係ないんでしょうか…？
Discussion