modal内でselect2が上手く動かない時の対処法

こんにちは，taniyuです．

セレクトボックスをより使いやすくする（入力による絞り込み機能等)ために，
select2を使っていた際に発生したバグについてお話します．

環境

今回は，以下の環境で開発を行っていた際に，発生したバグになります．

• bootstrap3
• select2 v4.0.2

結論と対応策

結論から入ります．

結論: select2とmodal の tabindex="-1" を同時に使うのはよくない．

select2が上手く動かなくなります．
※私の場合は，入力による絞り込み機能が動きませんでした．
(キーボード押しても何も反応しなかった)

次に対応策です．

対応策: select2を使うときは，tabindex="-1" を書かないようにする．

非常に簡単な対策で，modalのhtmlに書かれている tabindex="-1" を
削除するだけで解決しました．

次に，具体的にソースコードを使って説明します．
下記のコードはサンプルコード(公式サイトから引用)となりますが，

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

下記のように1行目のtabindexを消すことで，上手く動くようになりました．

<div class="modal fade" role="dialog">  <!-- この行のtabindex="-1"を消す-->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

ちなみに，参考にしたサイトは，以下のサイトになります． http://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
tabindexが何なのかについては，以下のサイトが参考になります． http://stackoverflow.com/questions/32911355/whats-the-tabindex-1-in-bootstrap-for

最後に

今回は，bootstrapのmodal内でselect2を使う際の注意点について説明しました．
複数のものを組み合わせることで発生するバグ(今回であれば，modal+select2)もあり，
このようなバグは，原因を特定しにくいことがあります．

私も最初はselect2で起きている問題だと勘違いしていて，
なかなか原因が特定できませんでした．
なので，検索しても原因の解決策が見つからない場合，
「何かを組み合わせて利用することで発生するバグかもしれない」
ということを考えたほうがいいかもしれません．