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 es 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 es 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.

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 es 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 es 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.

• javascript
• knockout.js

4 Answers 4

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/mikebridge/yYS7c/2/

You could change the event when knockoutjs updates the model to blur which is triggered more.

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

As you can see on Live example Knockout update model only when select option is selected:

• Mouse click
• Pressed enter button afret selecting by keyboard arrow buttons.

Binding the valueUpdate to 'keyup' did the trick for me. Does not affect changes done with the mouse, so looking good so far.

So something like this should work:

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