オチ： 同じ値のid属性を持ったやつがいた
追記：
Select2: 4.0.3
jQuery: 3.1.1
##どんなことが起こったか
以下のhtmlのselectタグにselect2を適用した時に以下の順序を踏むとselect2の外側をクリックした時にセレクトボックスが閉じなくなる
index.html
<html>
<head>
〜 色々省略 〜
</head>
<body>
<select id="hoge1" class="selectA select2">
<option>hoge1</option>
<option>hoge2</option>
</select>
<select id="hoge1" class="selectB select2">
<option>hoge3</option>
<option>hoge4</option>
</select>
<select id="hoge2" class="selectC select2">
<option>hoge5</option>
<option>hoge6</option>
</select>
</body>
</html>
~
index.js
$(() => {
$(".select2").select2({"width": "100px"});
})
- selectAをクリックしてセレクトボックスを出す
- selectBをクリックしてセレクトボックスを出す
ちなみに手順のどちらかをselectCにすると普通に動く
##原因
selectAとselectBに同じ値のid属性が付いている。
select2の実装が
・openイベント内で閉じるためのmousedownイベントをネームスペースできって、bodyにonする
・closeイベント内で閉じるためのイベントをネームスペースでとってbodyからoffする
・上記のネームスペースはselectタグについてるid属性で設定する
っていう事をしてるので、同じidの値を持ったselectタグがいると
- selectBのopenイベント
- selectAのcloseイベント
って順番で実行されるので、selectAのcloseイベントの時にhoge1でネームスペースきられたmousedownイベントが消えるので、select2の外側クリックしても消えなくなる。
というか、そもそも同じ値のid属性をつけることはhtml的に間違っている。
railsとかでselectタグ生成してるとふとした時に同じのが生まれてたりする。(した
3日位頭悩ませて色々試したオチが凄くくだらなかったど、くだらなすぎて情報がどこにもなかったのほんとうに困ったので、こういうこともあるよって事でね。