Twitter Bootstrap2のmodal()でfocusが外れてしまうことへの対策

原因

犯人は、showメソッドの中で設定されている transitionend イベント。

modalのセットされているjQueryオブジェクトにtransitionend イベントが割り当てられ、その中でfocus()が走るようになっている。

https://github.com/twbs/bootstrap/blob/v2.3.2/js/bootstrap-modal.js#L75-L77

          transition ?
            that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) :
            that.$element.focus().trigger('shown')

対策

transitionend イベントを止める。

[サンプル]

$modal.on("transitionend", function(e){
  e.stopPropagation()
})

参考情報

• javascript - Bootstrap Modal inputs lose focus on click - Stack Overflow

その他

2017年にもなってBootstrap2……