自分にやさしく学ぶプログラミング

プログラミング学習記録、備忘録

メモ:React 18.0.0 でChakraUIのModalを閉じると他の要素がクリックできなくなった

ChakraUIの勉強してまして、Modalコンポーネントを試していたときにちょっと詰まったところがあったのでメモです。

現象

ChakraUIの公式ドキュメントにあるModalのサンプルを自分のアプリ上に置いてみたんですが、

ボタンクリックでモーダル開く
→ 閉じる
→ 再度ボタンクリックできない
(hoverしても色変わらないしクリックしても何も起こらない、というか画面全体何かで覆われてるようで何もできない)

みたいな現象に見舞われました。

もしかしてChakraUIはReact18まだ使えないのか・・・?と思い、 package.jsonを下図のように変更してyarn installし直したら、Modalを閉じたあとでも他の要素がクリックできるようになりました。 f:id:chihaso:20220408200355p:plain

備考

ChakraUI をインストールした時からブラウザ検証ツールのコンソール上に

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

の警告が出てはいたので、「対応してないっぽいな」とは思ってたんですが、とりあえず動いてたのでそのままにしてました・・・
やはり警告は無視してはいけない・・・