Ember executes wrong/multiple actions within component

Question

I've written a small array-editor as a component in Ember and it works fine.

App.ArrayEditorComponent = Ember.Component.extend({
  actions: {
    add: function() {
      var value = this.get('inputValue');
      if(!value) {
        return;
      }
      var items = this.get('items');
      if(!items.contains(value)) {
        items.pushObject(value);
        this.set('inputValue', '');
      }
    },
    remove: function(item) {
      var items = this.get('items');
      items.removeObject(item);
    }
  }
});

The template below has been cleared of classes, check the fiddle for exact markup.

<div>
  <label {{bind-attr for="view.inputField.elementId"}}>{{label}}</label>
  <div>
    <div>
      {{input viewName="inputField" valueBinding="inputValue" placeholderBinding="placeholder" class="form-control" action="add"}}
      <span>
        <button type="button" {{action add}}>Add</button>
      </span>
    </div>

    <ul>
      {{#each item in items}}
      <li>
        <button {{action remove item}}>Remove</button>
        {{item}}
      </li>
      {{/each}}
    </ul>
  </div>
</div>

Now I wanted to add the possibility to add items using the enter-key instead of having to click the "Add"-button so I added action="add" to the input-helper and it will trigger the add-action when pressing return. However, if there are any items available it will also call the remove-action on the first item before adding the new one. The Add-button still works as it should.

I've also tried enter="add" but with the same results.

Here is the fiddle: http://emberjs.jsbin.com/nadeputa/1/edit

It seems to have something to do with me having a wrapping <form>-element, if I remove that it just executes the add-action as it should. I'm however using Bootstrap to style my application so I can't really get rid of the form without it messing everything up.

Is anyone able to explain why this is happening and how I can solve it?

raycohen raycohen · Accepted Answer · 2014-07-21T22:45:41

This is not specific to Ember. Hitting Enter on a text field in the form causes the default button in the same form to act as though it was clicked.

See the Implicit Submission part of the HTML spec, specifically:

hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

Ember executes wrong/multiple actions within component

2 Answers