Ember.js: Enter key sends Click event

[noslouch]

When an {{input}} helper is in a component with form set as the tagName, hitting the enter key in the field will trigger a click event to be sent to any other components rendered in the same context.

See this twiddle for a very basic use case: https://ember-twiddle.com/5e74584dff35cb7a2814812abbfe99b8?openFiles=templates.application.hbs%2Ctemplates.components.my-button.hbs

I'm not sure if this is something that is known and can be avoided, but it strikes me as unexpected.

[pichfl]

This is not a bug, but sort of a "feature" / implementation detail of HTML Forms.

To prevent this behavior, your <form> also needs an action attribute (or an Ember action trigger with on=submit) and any button inside the form should have its type attribute specified.

Pressing enter inside an <input> inside a <form> without the action attribute will trigger the first available <button> as most browsers default the type of an unspecified button to submit.

Your example shows both behaviors working in as expected.

To prevent this make your <button> a <button type="button"> and add an event handler to your form. To prevent the form from trying to call a submit action, add an event handler to your component that prevents the default for the submit event.

export default Ember.Component.extend({
  tagName: 'form',
  submit(event) {
    event.preventDefault();
  }
});

Doing both should yield the result that you expect.

[noslouch]

uggggggh. Thanks for this. The vast breadth of the web spec never ceases to confound. sorry to pollute the ember repo with this.