読者です 読者をやめる 読者になる 読者になる

Aqutras Members' Blog

株式会社アキュトラスのメンバーが、技術情報などを楽しく書いています。

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

こんにちは,taniyuです.

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

環境

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

結論と対応策

結論から入ります.

結論: 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で起きている問題だと勘違いしていて,
なかなか原因が特定できませんでした.
なので,検索しても原因の解決策が見つからない場合,
「何かを組み合わせて利用することで発生するバグかもしれない」
ということを考えたほうがいいかもしれません.