Enter to Submit Form on Arbitrary Element

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'span',
	attributeBindings: ['tabindex'],
  tabindex: '0',
  
  keyUp({ key }) {
    if (key === 'Enter') {
      
      var event = new Event('submit', {
      	bubbles: true,
        cancelable: true
      });
      
      this.element.querySelector('.hidden-input')
        .form
        .dispatchEvent(event); 
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    submit() {
      alert('submitted'); 
    }
  }
});

templates.application.hbs

<form {{action (action "submit") on="submit"}}>
  <input>
  <select>
    <option>1</option>
    <option>2</option>
  </select>
  <input type="checkbox">
  {{#my-component}}tabbable{{/my-component}}
  <button>Submit</button>
</form>

templates.components.my-component.hbs

{{yield}}
<input tabindex="-1" class="hidden-input" style="display:none">

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}