Bootstrap form-control class conflicting with Knockout databind

Question

I'm experiencing this weird bug with IE10 and it doesn't happen in Chrome or Firefox.

The bug is that when I use form-control from Bootstrap combine on a pair of parent-child select elements with Knockout data binding, the child select takes forever to refresh. But if you mouse over the child element, it refreshes right away.

Here's the JS to reproduce it.

Try browse this link with IE10 and change the value in the first select, the second select will not refresh unless you wait for a long time or mouse over to the second select.

But if I do not use form-control class for select elements, the 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);
});

@Hackerman, thanks for checking. But the enterprise users are stuck on IE10. — Ray Cheng, Jul 21 '15 at 19:11
IE10, ouch. I feel your pain. This is a crazy IE10 repaint/redraw issue. Someone has posted a question with a similar problem [here](http://stackoverflow.com/questions/18068846/ie10-repaint-redraw-issue). — Anish Patel, Jul 21 '15 at 20:51
I've updated your [fiddle](http://jsfiddle.net/o2fqaxLh/2/) with the [solution suggested](http://stackoverflow.com/a/18473826/1062224) from the other question. I've tested this in IE10 and it works. — Anish Patel, Jul 21 '15 at 20:57
@AnishPatel, thank you for sharing that solution. I think I'll use it since our users only use IE10. I'll comment on the code to make sure it'll be taken out when no longer needed. Please post as an answer so I can mark it as answer. — Ray Cheng, Jul 21 '15 at 21:16

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

This problem is an IE10 redrawing issue.

Another person had a similar issue.

Unfortunately, the solution is not ideal and very hacky.

You will need to add this code at the bottom of your populateItems function after all of your update logic:

$('#items').hide(0, function(){$(this).show()});

This will give IE10 a nudge to redraw the select element.

Here is your fiddle, updated with the working solution.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 21 '15 at 22:17

Anish Patel

4,332
1
30
45

I also found that toggling the child's `disabled` property also fixes the problem. http://jsfiddle.net/o2fqaxLh/3/ – Ray Cheng Jul 27 '15 at 16:47

Bootstrap form-control class conflicting with Knockout databind

1 Answers1