alpinejs を使うとき、モーダルウィンドウの領域外をクリックして open false にするときのドラッグクリック問題を修正

alpinejs で @click.outside="open = false" を使う場合に、ドラッグによる問題を修正する方法です。

モーダルウィンドウを扱う際、多くの例では @click.outside を使用します。 しかし、このようにすると、モーダルウィンドウの input でドラッグしていて、誤ってモーダルウィンドウの領域外でクリックを離した瞬間に outside イベントが発生し、モーダルウィンドウが閉じてしまう問題が起こります。

この問題を解決するには、モーダルウィンドウの外側にある div 領域にイベントを @mousedown.self="open = false" と設定する必要があります。

そうすれば、ドラッグによって領域外でクリックを離した場合には、モーダルウィンドウが閉じないように設定できます。