I have been following the getting started guide for ember.
I have come to the parts that deal with editing and removing items and have come across a problem that seems to occur in chrome but not firefox.
The custom component "edit-todo" has 2 events that are linked to the action "acceptChanges"
{{#if isEditing}}
{{edit-todo class="edit" value=title focus-out="acceptChanges" insert-newline="acceptChanges"}}
{{else}}
The "acceptChanges" action fires the "removeTodo" action if the item's title is empty
acceptChanges: function () {
this.set('isEditing', false);
if (Ember.isEmpty(this.get('model.title'))) {
this.send('removeTodo');
} else {
this.get('model').save();
}
},
removeTodo: function () {
var todo = this.get('model');
todo.deleteRecord();
todo.save();
}
If you edit an item, delete the text and press enter or switch focus, the item gets deleted. This works perfectly for me in Firefox.
In Chrome however, the acceptChanges action is firing twice if you delete the title and press enter. When the DOM updates to remove the item, the acceptChanges action is fired again, presumably because it loses focus.
This jsbin shows the problem, it is essentially just the code from the guide with some console logs. If you edit the item "BBB", delete the text and press enter, the data for "CCC" is deleted also. It remains in the DOM but you can no longer interact with the item and the items remaining count is wrong. If you open ember inspector in the developer tools you can see that the only data left is for the item "AAA".
I am wondering if this is a bug with ember, with ember-data, with chrome, or if it is expected behaviour that I should be checking for in my js?
I am using Chrome Version 26.0.1410.63
