Knockout.jsUpdate value does not work 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 an item, JSON returns to the server with the updated information. But if the user uses the “tab” to go to the select control, select the item and open the tab, and then, although the selected item is displayed in the user interface, JSON is returned with an empty value for this control.

It seems that the knockout presentation model is not updated if the user uses only keybord, it seems that there is some kind of change event that occurs specifically in the browser when the user uses the mouse.

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

I tried this 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 an AJAX call made?

This example of changing the selection using the keyboard works fine for me in IE and Firefox:

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

Answer 2

You can change the event when knockoutjs updates the model to a blur that fires more.

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

Answer 3

As you can see on the Live example, the Knockout update model only when you select the option:

• Mouse click
• Press the enter button by pressing the keyboard arrow button.

Answer 4

Binding the Update value to "keyup" did the trick for me. Does not affect changes made with the mouse, so for now you look good.

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>