🙌
bootstrapのmodalを使用時に、特定の要素をクリックするとx(クローズ)ボタンにフォーカスされる問題
はじめに
こんにちは、今回タイトル通りbs modalを使用時に特定の要素（私の場合はflatpickrで発生）をクリックした際にxボタンにフォーカスされるため画面上部にスクロール位置が戻ってしまう問題の解決方法を備忘録として残します。
対象読者
bootstrapのmodalを使用時に、なぜか画面上部に戻ってしまう現象に悩まされている方。
結論
data-bs-focus="false"を追加
<div class="modal fade" role="dialog" data-bs-focus="false">
~~~
</div>
本文
今回この現象が起こってしまうトリガーとしてmodalの要素外の要素をフォーカスした時にxボタンにフォーカスされてしまっているようです。
したがって、flatpickr以外のライブラリでも同様の問題が発生する可能性があります。
例えば私の場合、jqueryのselect2のプラグインでも似たような現象を確認しています。
参考にしたissue:
Discussion