目次
問題点
select2により数が非常に多いデータのセレクトボックスに検索のインプットを追加し、それによりデータのフィルタリングして探しているものを早く見つけられます。対象の要素を取得し、それにselect2をinitするだけで検索のインプットが勝手に追加されるため、とても便利なプラグインです。
ですが、システムの検証を行うと、同ページでも実装が上手く反映できた要素とできていない要素があるという謎の現象がありました。
その原因を調べてみると、実装が反映できていない要素はモーダルに置かれていることが原意でした。
問題の原因
その原因に関して色々調べてみましたが、公式サイトにて「Select2 does not function properly when I use it inside a Bootstrap modal.」の見出しの記事がありました。その見出しではSelect2はBootstrapモーダルの場合、上手く機能しないと書いてあり、記事の内容を確認すると、以下のことが書いてありました。
「This issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal. Since by default, Select2 attaches the dropdown menu to the <body> element, it is considered "outside of the modal".」
上記の文章を日本語にすると、Select2がディフォルトでドロップメニューをbodyの要素に追加しますが、Bootstrapのモーダルはモーダルの要素以外の要素のフォーカスを無効にする為、検索のインプットをセレクトしてもフォーカスされず、その結果は入力ができなくなります。
解決方法
その解決方法はドロップメニューがモーダルの要素、またはモーダル内にある要素に追加されるようにしないといけません。
Select2の説明コードは以下のようになっています。
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> ... <select id="mySelect2"> ... </select> ...</div>
...
<script> $('#mySelect2').select2({ dropdownParent: $('#myModal') });</script>
そのようにコードを修正してみると、問題を解決できました。
