title: Bootstrap form-control class conflicting with Knockout databind
body: <p>I'm experiencing this weird bug with IE10 and it doesn't happen in Chrome or Firefox.</p>
  
  <p>The bug is that when I use <code>form-control</code> from Bootstrap combine on a pair of parent-child <code>select</code> elements with Knockout data binding, the child <code>select</code> takes forever to refresh. But if you mouse over the child element, it refreshes right away.</p>
  
  <p>Here's the JS to reproduce it.</p>
  
  <p>Try browse this <a href="http://jsfiddle.net/o2fqaxLh/" rel="nofollow">link</a> with IE10 and change the value in the first <code>select</code>, the second <code>select</code> will not refresh unless you wait for a long time or mouse over to the second <code>select</code>.</p>
  
  <p>But if I do not use <code>form-control</code> class for <code>select</code> elements, the problem goes away like in this <a href="http://jsfiddle.net/o2fqaxLh/1/" rel="nofollow">link</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;label for="cats"&gt;Categories&lt;/label&gt;
  &lt;select id="cats" data-bind="options: availableCats, optionsText: 'name', value: selectedCat, event: {change: populateItems}" class="xform-control"&gt;&lt;/select&gt;
  &lt;label for="items"&gt;Items&lt;/label&gt;
  &lt;select id="items" data-bind="options: availableItems, optionsText: 'name', value: selectedItem" class="xform-control
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function () {
      var BaseVM = function () {
          var that = {};
          return that;
      };
  
      var TestVM = function () {
          var that = BaseVM();
  
          that.availableCats = ko.observableArray([{
              name: '--'
          }, {
              name: 'pork'
          }, {
              name: 'ham'
          }]);
          that.selectedCat = ko.observable(null);
          that.availableItems = ko.observableArray([]);
          that.selectedItem = ko.observable(null);
  
          that.populateItems = function () {
              that.availableItems([]);
  
              if (that.selectedCat().name === 'pork') {
                  that.availableItems([{
                      name: 'chop'
                  }]);
              } else if (that.selectedCat().name === 'ham') {
                  that.availableItems([{
                      name: 'spam'
                  }]);
              }
          };
  
          return that;
      };
  
      var vm = TestVM();
      ko.applyBindings(vm);
  });
  </code></pre>