Knockout: model not updated in internet explorer

Question

We have a weird issue that's happening only in Internet Explorer. The feature is working on Firefox and on Chrome. The bug can be reproduced in knockout 2.2.1 and in knockout 3.1.0.

I have spans that change them self to a textboxes when double clicked.

Here's the html:

<div>
    <span class="dataSourceSpan">@resourceManager.GetString("STR_DATABASE_SCHEMA_NAME"):</span>
    <div class="SchemasBloc">
        <ul class="Schemas" data-bind="sortable: { data: SchemaList, afterMove: UpdateDatabaseSchemaNameFromList }, visible: SchemaList().length > 0 ">
            <li class="SchemaList" data-bind="css: { selected: $data == $parent.SelectedSchema() }, click: $parent.SetSelectedSchema">
                <span class="labelText" data-bind="text: Description, visible: !isEditing(), event: { dblclick: startEdit }"></span>
                <input class="SchemaInput" data-bind="value: Description, visible: isEditing(), hasFocus: isEditing(), event: { keyup: endEditEnter, blur: endEdit }" />
                <a class="k-button" title="@resourceManager.GetString("STR_REMOVE_SCHEMA")" data-bind="click: $parent.removeSelectedSchema"><span class="k-icon k-i-close"></span></a>
            </li>
        </ul>
        <span class="addSchema">
            <a class="k-button" data-bind="click: AddSchema" title="@resourceManager.GetString("STR_ADD_SCHEMA")"><span class="k-icon k-i-plus"></span></a>
        </span>
    </div>
</div>

Here's the javascript:

var ShemaModel = function (description, IsNew) {
    var self = this;

    self.Description = ko.observable(description);
    self.IsNew = ko.observable(IsNew);

    self.isEditing = ko.observable(false);
    self.TemporaryEnvironmentDescription = ko.observable(false);


    self.startEdit = function (model, event) {
        self.isEditing(true);
        self.TemporaryEnvironmentDescription(self.Description());
        $(".Schemas .selected").children("input").focus();
    };

    self.endEdit = function (model, event) {
        if (self.Description() !== self.TemporaryEnvironmentDescription() && self.Description() !== "" && self.isEditing()) {
            self.TemporaryEnvironmentDescription(self.Description());
        }
        else if (self.IsNew() && self.isEditing()) {
            //remove the added schema
            environmentModel.SelectedEnvironment().SelectedDataSource().SchemaList.remove(environmentModel.SelectedEnvironment().SelectedDataSource().SelectedSchema());
        }
        environmentModel.SelectedEnvironment().SelectedDataSource().UpdateDatabaseSchemaNameFromList();
        self.isEditing(false);
        self.IsNew(false);
    };

    self.endEditEnter = function (Model, event) {
        event.keyCode === 13 && self.endEdit(Model, event);
    };
};

The problem in IE is in the endEdit() function self.Description() always return empty string. The model is not updated. Before editing, we store the span text value in a temp value. When the event endedit is triggered, we compare the temp value with the current value. If they are different we update the model.

When we hit the enter button the model is not updated (keyUp event is not working properly). The blur event is working fine. I don't know if it's related to the enter event that's not triggered.

I tried to force the blur event but it messed up my logic.

Any ideas?

Answer 1

Try adding valueUpdate: 'keyup' in

<input class="SchemaInput" data-bind="value: Description, visible: isEditing(), hasFocus: isEditing(), event: { keyup: endEditEnter, blur: endEdit }" />

This will force the binding to update the value of Description observable on key release