Bootstrap vs select events order

by Kolichikov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-12">
  <select class="btn-group btn-block" id="selectDrop">
    <option selected value="">Option (any)</option>
    <option  value="a">A</option>
    <option  value="b">B</option>
  </select>
</div>

<div class="btn-group btn-block " id="bsDrop">
  <button type="button" id="bsDropButton" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
    Option (any)
  </button>
  <ul class="dropdown-menu">
    <li value="">Option (any)</li>
    <li value="a">A</li>
    <li value="b">B</li>
  </ul>
</div>

<button id="repopulate">
Repopulate Select
</button>
<div><h4>Event timing output</h4></div>
<div id="debugInfo"></div>

JavaScript

var di = $("#debugInfo");
$("#selectDrop").change(function(){
di.append("<p>select drop was changed</p>")
});
$("#selectDrop").focus(function(){di.append("<p>select drop was focused on</p>")});
$("#bsDrop li").click(function(){di.append("<p>bs drop li was clicked</p>")});
$("#bsDropButton").focus(function(){di.append("<p>bs drop was focused on</p>");});
$("#repopulate").click(function()
{
   $("#selectDrop").val("notRealy");
});