Ember.js - How can I stop my input bar for editing from automatically accepting changes if I type

Question

I have an input that actively edits the name of a model. The problem is that the input accepts the changes if I begin to type into the input.

So writing a categoryName (an attribute of recordCategory) with a value of "Something Else" would be a giant chore because I would need to refocus on the edit-recordCategory input after every letter I type. So if i would be focused on the input and I would quickly type "Some", it would accept the 'S' before unfocusing me out of the input and resorting the recordCategory in the list based on it's current value, which would only be "S".

Here's a more detailed example of my code.

{{#each searchResults itemController="recordCategory"}}
    <div id="hoveredRow" {{bind-attr class="isEditing:editing"}}>
      {{#if isEditing}}
          <div class="input-standard">
            {{edit-recordCategory value=categoryName focus-out="acceptChanges"
             insert-newline="acceptChanges"}}
          </div>
      {{else}}
        {{categoryName}}
      {{/if}}
    </div>
{{/each}}

This is my controller

isEditing: false,
  actions: {
    editrecordCategory: function(recordCategory){
        this.set('isEditing', true);
        console.log(this.get('isEditing is toggling'))
    },
    acceptChanges: function() {
      this.set('isEditing', false);
      if (Ember.isEmpty(this.get('model.categoryName'))) {
        this.send('removerecordCategory');
      } else {
        this.get('model').save();
      }
      console.log(this.get('isEditing'))
    },
  }

and then the view that defines edit-recordCategory

VpcYeoman.EditRecordCategoryView = Ember.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

Ember.Handlebars.helper('edit-recordCategory', VpcYeoman.EditRecordCategoryView);

EDIT:

After implementing GJK's version of the 'acceptChanges' action. I was receiving the same problem.

TEST 1

I commented out the acceptChanges action and both of it's references in {{edit-recordCategory value=categoryName focus-out="acceptChanges" insert-newline="acceptChanges"}} making it just {{edit-recordCategory value=categoryName}}. The same problem is still happening. This leads me to believe that the problem is not in the way acceptChanges was written.

There was a point where my original 'acceptChanges' action and its use in

{{edit-recordCategory value=categoryName focus-out="acceptChanges"
             insert-newline="acceptChanges"}}

worked perfectly.

TEST 2

On top of taking out any reference of 'acceptChanges', i removed the {{#if Editing}} conditional. The

{{edit-recordCategory value=categoryName focus-out="acceptChanges"
             insert-newline="acceptChanges"}}

did not disappear upon typing (as expected with there being no ember conditional, but the {{edit-recordCategory}} still auto submits when I type. It should also be noted that this list of recordCategories sorts itself, so upon accepting the edit, i'm focused out of {{edit-recordCategory}} and the object resorts itself based on it's new categoryName value

Problem Found! But it breaks my filter bar.

Once i commented out this function

searchResults: function() {
    var searchTerm = this.get('searchTerm');
    var regExp = new RegExp(searchTerm,'i');

    // We use `this.filter` because the contents of `this` is an array of objects
    var filteredResults = this.filter(function(category) {
        return regExp.test(category.get('categoryName'));
    });

    return filteredResults;
}.property('@each.categoryName', 'searchTerm'),

and took 'searchResults' out of {{#each searchResults itemController="recordCategory"}} to editing worked smoothly, but now my search bar filter is not working.

Answer 1

Your categoryName property is on your model, which means you can override it in your controller. You'll want to use a temporary property on your controller to solve your issue.

recordCategory: '',

actions: {
    acceptChanges: function() {
        var recordCategory = this.get('recordCategory');
        this.set('model.recordCategory', recordCategory);
    }
}