Knockout 3.0 input tab off clears value

I have a project that until recently was using Knockout 2.3. When we upgraded to 3.0, we noticed that our bindings to a jQuery autocomplete seemed to no longer be retaining their value the first time that focus on said element was lost. After the first time that the value has been cleared on an autocomplete and the focus to that element is restored, the correct behavior then occurs.

We are using RP Neimeyer's jQuery AutoComplete binding handler (with a few modification for some custom autocomplete lists and behaviors that are not relevant to this issue) http://jsfiddle.net/rniemeyer/YNCTY/

The point is, this autocomplete worked with no issue in Knockout 2.3, but was broken across the app after we upgraded. To test this theory, I temporarily downgraded to Knockout 2.3, and the issue was resolved. Permanently downgrading to 2.3 however, is also not an option because of the observableArray change feature that was added to 3.0 that we are using for a new feature.

Our binding looks like this:

<input id="stateIdAutoComplete" maxlength="50" data-bind="jqAuto: { autofocus: false }, jqAutoSource: stateIdFilterList, jqAutoSourceLabel: 'enteredValue', jqAutoSourceInputValue: 'value', jqAutoValue: stateIdFilterSelected, value: stateIdFilter, valueUpdate: 'input', tabEnterKey: keyPressEvent, attr: { placeholder: stateIdPlaceHolder }, preventBubble: 'click'" />

and the view model looks like this:

function viewModel(){
var self = this;

self.stateIdFilterList = ko.observableArray([{
    enteredValue: '1',
    value: '1'
},{
    enteredValue: '2',
    value: '2'
}, {
    enteredValue: '3',
    value: '3'
}]);

self.stateIdFilterSelected = ko.observable();

self.stateIdFilter = ko.observable();

self.stateIdPlaceHolder = 'State ID';

self.keyPressEvent = function(data){

};

}

There is a more extensive version of the code including the necessary custom binding handlers (albeit not all of it, but enough to demonstrate the problem) found at http://jsfiddle.net/aaronbastian/xYm6U/6/

To recreate the behavior, simply start typing a recognized value in the autocomplete. after the autocomplete box opens, tab off of that input and onto the next one. The value in the input clears entirely. This even happens if you finish typing the value in the autocomplete (without selecting it), and tabbing off.

In this example, it is expected that the tab off would not clear the autocomplete, regardless of whether or not the value entered is contained by one of the items in the list.

Any help with this would be greatly appreciated. Thanks!

Answers


It seems that the original jqAuto binding was designed to work separately from, and not require, the built-in value binding. You are using both together and it seems they are stepping on each other's toes.

I didn't try to go too deeply in the code, but I was able to trace which part is clearing the input field. It's coming from the jqAuto.update function. By removing this function, I was able to solve the problem. I also couldn't see any downside of removing it in your example. I think that's true because the value binding handles updating the input field.

http://jsfiddle.net/xYm6U/7/


Need Your Help

Calculating area between two curves

c# math graph

I am working on a program that compares two curve (resulted from diode output so its Voltage/Current curve).

Automatically Disable Default Discover SuiteCRM Dashlet

sugarcrm suitecrm

How can I automatically disable the Default Discover SuiteCRM Dashlet so that when a new User is created that the dashlet will not show on the default dashboard?