Race Condition on run.later()

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  textBoxInDOM: Ember.computed(function()
  {
      let elem = document.getElementById('codeThing');
    	alert((typeof elem));
      return (typeof elem);
  }),
  displayTextBox: true,
  codeAsWeType: null,
  codeChangedContext: null,
  codeDidChange(code)
  {
		Ember.run.cancel(this.get('codeChangedContext'));
    let context = Ember.run.later(this, function()
    {
      if (this.get('displayTextBox') === false) {
        alert("action for element removed from the DOM shouldn't fire?");
      }
			this.set('codeAsWeType', null);
      this.set('codeAsWeType', code);
    }, 800);
    
    this.codeChangedContext = context;
  },

  actions:
  {
    codeChanged(code)
    {
      this.codeDidChange(code);
    },
    buttonClicked()
    {
      this.toggleProperty('displayTextBox');
    }
  }
});

go-boom.template.hbs

{{yield}}

templates.application.hbs

<h1>Race condition for action on run.later()</h1>
<br>
<p>Type something in the text box below.</p>
<p>After a short delay what you type will appear below</p>
<p>Click on the button before what you type shows up.</p>
<br>

{{#if displayTextBox}}
		<input id="codeThing" value={{codeText}} oninput={{action "codeChanged" value="target.value"}}>
    <br>
{{/if}}

<p>You are typing: {{codeAsWeType}}</p>

<br>
<button {{action "buttonClicked"}}>Click to cause racing condition.</button>
<br>
<br>

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"
  }
}