カレンダー系UIは重なり時のpointer-eventsに注意

こんにちは。株式会社DELTAの三浦です！今回はカレンダーUIを作るときに見過ごしていた落とし穴に気づいたのでまとめます。

どんな人向け？

カレンダーUIを構築しようとしている方

何があったか

私は入社直後、スマートクリニックシステムのUIを実装していました。その時担当したひとつが予約管理カレンダーです。

今回、サービスを使っている現場の方から「カレンダーで予約セルをクリックすると、左隣のセルがクリックされたことになってしまう」という報告がありました。

予約セルにはすべての診療情報を出せるわけではないため、セルをホバーすると、セルの2倍の大きさのポップオーバーが出て、そこで氏名全体などを確認できるようにしていました。

どうやらこのポップオーバーを一度表示していると、ホバーアウトした後に隣のセルをクリックしても、ポップオーバーを表示したセルがクリックされたことになってしまうようです。

原因

UIの構築にはChakra UIのpopoverを使用しています。このコンポーネントがCSSのopacityとvisibillityのみでポップオーバーを非表示にしていたため、マウスイベントを検知してしまっていました。

解決法

CSSのpointer-eventsプロパティをnoneに設定しました。
ホバーで現れるポップオーバーの中にはクリックするべき要素はなかったので、改めて設定しても問題ないと判断しました。
いや、最初から設定していれば良かったのですが。

疑問1

なんでdisplay:none;を使わない？
→displayプロパティはレンダリングを再発生させます。表示・非表示の切り替えが滑らかではなくなるため、使っていないと思われます。

疑問2

最初からコンポーネント側で設定しておくべきなのでは？
→Chakra UIのドキュメントには、ポップオーバーの中にフォームを入れるなどの用例があります。表示したコンテンツの中で操作する想定なので、設定していないようです、

疑問3

そもそも使うコンポーネントはpopoverでよかったのか？ホバー表示だけが目的ならtooltipでもよかったのでは？
→Chakra UIのtooltipは簡単な説明文をいれるのみの用例です。今回はリッチな表示をさせたかったため、popoverが妥当だったと思います。

まとめ

予約カレンダーのような、セルが重なり合うようなUIは必ずpointer-eventsを気にしましょう！