はじめに
アイコンをクリックするとモーダルが表示されるように実装したのですが、モーダルを閉じた後にアイコンを何度クリックしてもモーダルが開きませんでした。
公式からコードをコピペしても同じ現象が起きました。
原因と解決方法
ブラウザの開発者ツールでアイコンのスタイルを確認してみると「chakra-modal__content-container」が画面全体を覆っていました…
調べてみると、どうやらframer-motionのバージョンが古いの原因のようなので、最新版にアップデートすることで解決できました。
今回はv4からv10になりました。
おわりに
見えない何かと戦っていました。ちなみにframer-motionはv6でもモーダルの動作を確認できています。