Knockout JS inline editing doesn't catch Enter Key in Internet Explorer

Question

I am using the basic form of the following jsfiddle http://jsfiddle.net/rniemeyer/8D5aj/

ko.bindingHandlers.hidden = {
    update: function(element, valueAccessor) {
        ko.bindingHandlers.visible.update(element, function() { return !ko.utils.unwrapObservable(valueAccessor()); });
    }        
};

ko.bindingHandlers.clickToEdit = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor(),
            link = document.createElement("a"),
            input = document.createElement("input");

        element.appendChild(link);
        element.appendChild(input);

        observable.editing = ko.observable(false);

        ko.applyBindingsToNode(link, {
            text: observable,
            hidden: observable.editing,
            click: observable.editing.bind(null, true)
        });

        ko.applyBindingsToNode(input, {
            value: observable,
            visible: observable.editing,
            hasfocus: observable.editing,
            event: {
                keyup: function(data, event) {
                    //if user hits enter, set editing to false, which makes field lose focus
                    if (event.keyCode === 13) {
                       observable.editing(false);
                       return false;
                    }
                    //if user hits escape, push the current observable value back to the field, then set editing to false
                    else if (event.keyCode === 27) {
                       observable.valueHasMutated();
                       observable.editing(false);
                       return false;
                    }

                }
            }
        });
    }
};

from this question to create a clickable span that you can then edit the value of when you click it. When you hit enter it should update the observable with your new value.

It works fine in chrome, but in internet explorer (10 9 or 8) when you hit enter, the value reverts to the value it was before you started editing it and I can't figure out why. Is there some inherent way that IE handles the enter key in an input field that makes this not work, and is there a work-around?

Answer 1

This may be too late, but I encountered this error and this is how I fixed it.

The reason why this happens in IE is because returning false isn't enough to tell the browser that it has lost focus and to grab the updated value. So, by forcing the input to lose focus .blur() triggers the correct behaviour.

ko.bindingHandlers.clickToEdit = {
    init: function (element, valueAccessor) {
        var observable = valueAccessor(),
            link = document.createElement("a"),
            input = document.createElement("input");
        link.classList.add('editField');

        element.appendChild(link);
        element.appendChild(input);

        observable.editing = ko.observable(false);

        ko.applyBindingsToNode(link, {
            text: observable,
            hidden: observable.editing,
            click: observable.editing.bind(null, true)
        });

        ko.applyBindingsToNode(input, {
            value: observable,
            visible: observable.editing,
            hasfocus: observable.editing,
            event: {
                keyup: function(data, event) {
                    //if user hits enter, set editing to false, which makes field lose focus
                    if (event.keyCode === 13) {
                        input.blur(); //force the input to lose focus
                        observable.editing(false);
                        return false;
                    }
                        //if user hits escape, push the current observable value back to the field, then set editing to false
                    else if (event.keyCode === 27) {
                        observable.valueHasMutated();
                        observable.editing(false);
                        return false;
                    }
                }
            }
        });
    }
}

Fiddle: http://jsfiddle.net/KyleMuir/yTrkm/

Hope this helps!