オチ：同じ値の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日位頭悩ませて色々試したオチが凄くくだらなかったど、くだらなすぎて情報がどこにもなかったのほんとうに困ったので、こういうこともあるよって事でね。