AutoFocus Component

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  init() {
    this._super(...arguments);
    
    $.mockjax({
      url: '/api/mock',
      type: "POST",
      status: 422,
      responseText: {
        errors: {
          first_name: "is required" 
        }
      }
    });
  },
  model() {
    return $.getJSON('/api/mock');
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

fidgets.template.hbs

hello fidgets

flat-inputs.component.js

import Ember from 'ember';
const {Component, observer, computed, $} = Ember;

/**
 * Displays inputs for a percentage and a flat amount
 *
 * @class FlatPercentageInputs
 * @namespace Components
 */
export default Component.extend({
  /**
   * Is set to the percentage/flat discount type
   *
   * @property discountType
   * @type     {String}
   * @default  null
   */
  discountType: null,
  
  didInitAttrs() {
    console.log('didReceiveAttrs');
		this.setAmount(this.get('discountAmount'), this.get('discountType'));    
  },

  /**
   * Used to for the value of the flat discount input
   *
   * @property discountFlat
   * @type     {Number}
   * @default  null
   */
  discountFlat: null,

  /**
   * Used to for the value of the percent discount input
   *
   * @property discountPercent
   * @type     {Number}
   * @default  null
   */
  discountPercentage: null,

  /**
   * The value for the flat/percentage input is set into this property
   *
   * @property discountAmount
   * @type     {Number}
   * @default  null
   */
  discountAmount: null,
  
  setAmount(amount, type) {
    console.log('setAmount', ...arguments);
    if(type === 'percentage') {
      this.setProperties({
        discountType: 'percentage',
        discountPercentage: amount,
        discountFlat: null
      });
    } else {
      this.setProperties({
        discountType: 'flat',
        discountFlat: amount,
        discountPercentage: null
      });
    }
  },
  
  actions: {
		changeAmount(amount, event) {
      console.log('action fired');
      if($(event.target).hasClass('js-percentage')) {
        this.setAmount(amount, 'percentage');  
				console.log('percentage');
      } else {
				this.setAmount(amount, 'flat');        
				console.log('flat');
      }
    }
  }
});

flat-inputs.template.hbs

<fieldset class="discount-percentage">
  {{input type="text" value=discountPercentage class="js-percentage" key-up="changeAmount"}}
</fieldset>

<fieldset class="or-element">
  OR
</fieldset>

<fieldset class="discount-flat">
  {{input type="text" value=discountFlat class="js-flat" key-up="changeAmount"}}
</fieldset>

focus-input.component.js

import Ember from 'ember';
const {TextField, on} = Ember;

/**
 * Extends the TextField component by setting the focus to the current input
 * when it is inserted
 *
 * @class FocusInput
 * @namespace Components
 */
export default TextField.extend({
  /**
   * Sets the focus on the current element when inserted
   *
   * @method setAutofocus
   */
  setAutofocus: on('didInsertElement', function() {
    this.$().focus();
  })
});

focus-input.template.hbs

{{yield}}

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.resource('widgets');
  this.resource('fidgets');
});

export default Router;

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{model.text}}

{{flat-inputs discountAmount=31 discountType="percentage"}}

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.13/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember-template-compiler.js",
    "jquery-mockjax": "https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"
  }
}

widgets.template.hbs

This input has an autofocus and should set the cursor onDidInsertElement<br />

{{focus-input}}