I have this simple input
<div class="input-group" data-bind="attr:{id: 'date-rec-datepicker-calendar-' + invoiceId()}, liveEditor: value">
<input class="edit form-control" type="text"
data-bind="attr:{id: 'date-rec-editor-' + invoiceId()},
value: value,
hasFocus: value.editing,
event: { blur: value.stopEditing }" />
</div>
and this KO extender
this.value = ko.observable();
ko.extenders.liveEditor = function (target) {
target.editing = ko.observable(false);
target.edit = function () {
target.editing(true);
};
target.stopEditing = function () {
target.editing(false);
};
return target;
};
ko.bindingHandlers.liveEditor = {
init: function (element, valueAccessor) {
var observable = valueAccessor();
observable.extend({ liveEditor: this });
},
update: function (element, valueAccessor) {
var observable = valueAccessor();
ko.bindingHandlers.css.update(element, function () { return { editing: observable.editing }; });
}
};
I have no clue why, after focusing the input, when I click outside the input, the blur event attached function is triggered two times, so the stopEditing function is hit 2 times. I saw this problem is very common with the blur event.