0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

useRefを用いてモーダルの外側判定を行うと起きた不具合

Posted at

前提

モーダルの外側をクリックしたときにモーダルを閉じる実装方法は何パターンかあると思います。
今回は下記記事で紹介されているような、useRefを使った方法で外側判定を行っていました。
https://qiita.com/G4RDSjp/items/58364a6655d4968a90d9

起きた不具合

モーダルの上にクリックするとその要素が消える要素を置いていて、その要素をクリックした際に、モーダルも閉じてしまう現象が発生しました。

gif-output-Tue07Jan2025101329GMT.gif

原因

クリックされた直後に要素が消滅し、外側をクリックしたと判定されてしまっていたため。

解決策

モーダルの外側判定を別のやり方で実現することで解決しました。
参考:https://zenn.dev/aiq_dev/articles/b6a2653e52e028

まとめ

useRefを用いた要素の外側クリック判定方法は便利ですが、モーダルに関しては違うやり方で実装した方が良いということがわかりました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?