Bootstrap formatting control class conflicting with knockout binding

I am experiencing this strange error with IE10 and it does not happen in Chrome or Firefox.

The error is that when I use form-control

from Bootstrap's parent-child element select

pairing with Knockout data binding, the child select

takes forever the update. But if you click over the child it will update immediately.

Here JS reproduces it.

Try to view the link from IE10 and change the value in the first select

, the second select

won't update unless you wait a long time or mouse over to the second select

.

But if I don't use form-control

class on elements the select

problem goes away like in this link .

Html

<label for="cats">Categories</label>
<select id="cats" data-bind="options: availableCats, optionsText: 'name', value: selectedCat, event: {change: populateItems}" class="xform-control"></select>
<label for="items">Items</label>
<select id="items" data-bind="options: availableItems, optionsText: 'name', value: selectedItem" class="xform-control

      

        
        
        
      

    

Js

$(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);
});