はじめに
Dialogでデータ入力し、画面遷移するとボタン反応しない事象がありました。
開発環境ではエラーも表示されなかったです。
どの画面を押下しても反応なしになりました。
問題
Dialogでデータ登録後、Home画面へ遷移、ボタンを押下すると画面遷移できる想定でした。
この問題がなぜ起こっているかを確かめるために、遷移先のボタンを押下すると"check"と表示されるようにしました。
<Box maxW="800px" mx="auto" p={6} onClick={() => console.log("check")}>
ボタンを押下してもconsole上にはメッセージが表示されませんでした。
Routerなどの問題ではなく、クリックイベント自体が問題でした。
解決方法
DevToolsでDOMを確認したところ
<body data-scroll-lock="" data-inert="" style="overflow: hidden; pointer-events: none;">
とありました。
Dialogで入力したあとの処理で問題が起こっていました。
本来、Dialogが完全に閉じてから遷移することが正しいです。
しかし、Dialogの処理で以下のようにしていました。
Dialog
setOpen(false);
navigate("/home");
連続実行すると、Dialogのクリーンアップが終わる前に画面遷移していました。
そのため、Dialog側と遷移先で修正することになりました。
①連続実行にならないようにすること
②遷移先で強制的に解除すること
①
Dialog
setOpen(false);
requestAnimationFrame(() => {
navigate("/home");
});
②
Home
useEffect(() => {
～
document.body.style.pointerEvents = "";
document.body.removeAttribute("data-inert");
document.body.removeAttribute("data-scroll-lock");
},[])
画面は正常に表示されているのにもかかわらず、クリックが反応しない現象で原因に時間がかかりました。
今回
- console.logでイベントを確認する
- DevToolsでDOMを確認する
という順番で切り分けると原因にたどり着きやすいと感じました。
おわりに
すごく時間がかかりました