knockout-deferred-updates does not play nicely with Throttle in Safari IOS 7

shaunol commented 10 years ago

Hello, just ran into a weird issue, I'm using knockout-3.0.0 with knockout-deferred-updates included, I have the following example page:


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
</head>
    <body>
        <div>
            <input type="text" data-bind="value: MyStringObservable, valueUpdate: 'afterkeydown'" />
        </div>
        <div>
            <span data-bind="text: MyStringComputed"></span>
        </div>
        <script type="text/javascript" src="knockout-3.0.0.js"></script>
        <script type="text/javascript" src="knockout-deferred-updates.min.js"></script>
        <script type="text/javascript">
            function AppViewModel() {

                var self = this;

                self.MyStringObservable = ko.observable("");
                self.MyStringComputed = ko.computed(function () {
                    return self.MyStringObservable();
                }).extend({ throttle: 500, deferred: false });

            }

            ko.applyBindings(new AppViewModel());
        </script>
    </body>
</html>

I am using throttle to ensure the computed observable that is dependent on the bound textbox only recomputes after 500ms, however, on Safari IOS 7, this causes the textbox to enter a bugged state where characters are glitching/being removed as you type.

This only occurs when I include throttle and deferred in the same project.

As per my code snippet, even if include deferred: false on the computed observable, the bug still occurs.

Cheers

shaunol commented 10 years ago

Referencing this issue on the knockout tracker https://github.com/knockout/knockout/issues/1118 I believe it may be related

mbest commented 10 years ago

Can you try using input instead of afterkeydown?

shaunol commented 10 years ago

Interesting, this has solved the issue across all my browsers.

Is this event recommended to use full time for any input fields? In place of afterkeydown that is.

mbest commented 10 years ago

The input event is supported in all modern browsers, specifically Internet Explorer since version 9 and Firefox since version 4.

Bearcosta commented 10 years ago

@mbest Any tips on how to handle this if you must support IE8 as well?

Would this work?

valueUpdate: ['input', 'afterkeydown']

Cheers!

mbest commented 10 years ago

@Bearcosta, that seems fine.

Bearcosta commented 10 years ago

@mbest Thanks! Tested it now and it seems to be working. Haven't tested it in IE8 yet though. I think I recall another issue that setting compatibility mode in IE11 won't work fully since knockout still detects it as IE11 anyways? hmm but come to think about it, that shouldn't matter for testing this particular issue with IE11 as IE8 in compatibility mode...

Cheers

mbest / knockout-deferred-updates

knockout-deferred-updates does not play nicely with Throttle in Safari IOS 7 #19