Knockout.js valueUpdate not working when user uses keyboard

Question

Im using Knockout.js and ASP.NET. My HTML is as follows:

<div class="InputField">
    Fixed/Floating
    <div class="FieldContainer">
        <select data-bind="options: $root.FixedLoanOptions, selectedOptions: IsFixed, valueUpdate: 'change'" ></select>
    </div>
</div>

If the user uses the mouse to select the item, the JSON comes back to the server with the updated information. But if the user uses "tab" to tab onto the select control, select an item, and tab off, then even though the selected item is displayed on the UI, the JSON comes back with a blank value for this control.

It seems that the Knockout view model does not update if the user uses the keybord only, there seems to be some change event that happens specifically in the browser when the user uses the mouse.

How can I fix this? Is there a way I can register the select boxes onchange event to use a function that updates the Knockout model manually?

I've tried it in both IE9 and Firefox and I have the same problem in both.

Answer 1

What does the rest of your code look like? How is the AJAX call being made?

This example of modifying a select with the keyboard works OK for me on IE and Firefox:

http://jsfiddle.net/mikebridge/yYS7c/2/