New Twiddle

components.example-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  didInsertElement() {
    // not great - but enough to see the problem...
    document.onkeypress = function (e) {
      e = e || window.event;
        // use e.keyCode
    	console.log('you hit keycode #' + e.keyCode);
      if (e.keyCode === 27) {
      	console.log('escape');  
      }
      if (e.keyCode === 99) { // 'c' - should be 67 according to http://keycodes.io
      	alert('close');
        // trigger toggleAction?
      }
    };
  },
  
  // Passed in from context
  visible: null,

  keyPress(event) { // see above - does the same thing... but this is attached only to certain things... like the input field
    console.log('keypress...', event.keyCode);
  },
  
  actions: {
  	toggleForm() {
      console.log('toggled');
  		this.toggleProperty('visible');
		},
  },

  willDestroyElement() {
    // try and clean up any event listeners you created
  },
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'escape key example',
  
  formShown: false,

  keyPress() {
    console.log( 'nope' );
  },

  actions: {
  	toggleForm() {
      console.log('toggled');
  		this.toggleProperty('formShown');
		},
  },
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

{{#unless formShown}}
  <button {{action 'toggleForm'}}>Open form</button>
{{/unless}}

<br><br>

{{#if formShown}}
	{{example-form visible=formShown}}
{{/if}}

templates.components.example-form.hbs

<form style="border: 1px solid red; padding: 1rem;">
  FORM <br>
  <button {{action 'toggleForm'}}>X</button>
  <br>
  {{input}}
</form>

twiddle.json

{
  "version": "0.13.0",
  "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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}