New Twiddle

components.input-field.js

import Ember from 'ember';

export default Ember.Component.extend({
  label: null,
  placeholder: null,
  
  value: null,
  update: null,
  
  hasFocus: false,
  updateFocus: null,
  
  didInsertElement() {
    this._super(...arguments);
    this.checkFocus();
  },
  
  didUpdateAttrs() {
    this._super(...arguments);
    this.checkFocus();
  },
  
  checkFocus() {
    if (this.get('hasFocus')) {
      this.$('input').focus();
    } else {
      this.$('input').blur();
    }
  },
  
  focusIn() {
  	this.sendAction('updateFocus', true);
  },
  focusOut() {
  	this.sendAction('updateFocus', false);
  }
});

components.input-user.js

import Ember from 'ember';

export default Ember.Component.extend({
  users: null,
  
  username: null,
  user: null,
  hasFocus: false,
  
  actions: {
    lookupUser(username) {
      this.set('username', username);
      
      const users = this.get('users');
      
      if (users && username in users) {
        this.set('user', users[username]);
        this.set('hasFocus', false);
      }
    },
    edit() {
      this.set('hasFocus', true);
    }
  }
});

components.one-way-input.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'input',
  attributeBindings: [ 'type', 'value', 'placeholder', 'data-stripe', 'name' ],
  type: 'text',
  _sanitizedValue: undefined,

  input() { this._handleChangeEvent(); },
  change() { this._handleChangeEvent(); },
  
  _handleChangeEvent() {
    let value = this.readDOMAttr('value');
    this._processNewValue.call(this, value);
  },

  _processNewValue(rawValue) {
    let value = this.sanitizeInput(rawValue);

    if (this._sanitizedValue !== value) {
      this._sanitizedValue = value;
      this.attrs.update(value);
    }
  },

  sanitizeInput: function(input) {
    return input;
  },

  didReceiveAttrs: function() {
    if (!this.attrs.update) {
      throw new Error(`You must provide an \`update\` action to \`{{${this.templateName}}}\`.`);
    }

    this._processNewValue.call(this, this.get('value'));
  }
});

controllers.application.js

import Ember from 'ember';

const USER_FIXTURES = {
  tomdale: {
    name: 'Tom Dale',
    food: 'Pizza',
    color: 'red'
  },
  wycats: {
    name: 'Yehuda Katz',
    food: 'Mango',
    color: 'green'
  }
};

export default Ember.Controller.extend({
  users: USER_FIXTURES
});

helpers.and.js

import Ember from 'ember';

export function and(params/*, hash*/) {
  return params.every(item => Boolean(item));
}

export default Ember.Helper.helper(and);

helpers.not.js

import Ember from 'ember';

export function not(params/*, hash*/) {
  return !params[0];
}

export default Ember.Helper.helper(not);

helpers.or.js

import Ember from 'ember';

export function or(params/*, hash*/) {
  return params.any(item => Boolean(item));
}

export default Ember.Helper.helper(or);

templates.application.hbs

{{input-user users=users}}

<hr>

<p>
	Enter a username above (tomdale or wycats). When the specified user is found, the field disappears and a short description is shown instead.
</p>

<p>
	Clicking the "change user" button shows the input field again and sets the focus automatically for you. Clicking outside of the field ("blurring") makes it disappear again.
</p>

<p>
	NOTE: this uses a very basic implementation of ember-one-way-controls stolen from <a href="https://ember-twiddle.com/2d7246875098d0dbb4a4?openFiles=components.one-way-input.js%2C">this twiddle</a>. Therefore providing an initial value is not possible and the field clears upon re-render.
</p>

templates.components.input-field.hbs

<label>{{label}}:</label>

{{! NOTE: Providing an initial value with `value=value` is not possible with this primitve implementation of ember-one-way-input }}

{{one-way-input
  update=update
  placeholder=placeholder
}}

templates.components.input-user.hbs

Current values:

<ul>
	<li><strong>username</strong>: {{username}}</li>
	<li><strong>user / user.name</strong>: {{user}} / {{user.name}}</li>
	<li><strong>hasFocus</strong>: {{hasFocus}}</li>
</ul>

{{#if (or hasFocus (not user))}}
  {{input-field
 		label="Username" placeholder="tomdale or wycats"
    value=username
  	update=(action "lookupUser")
    hasFocus=hasFocus
    updateFocus=(action (mut hasFocus))
	}}
{{else}}
	<strong>@{{username}}</strong> ({{user.name}})
  likes {{user.food}} and has a {{user.color}} shirt.
  
  <button onclick={{action "edit"}}>
  	Change user
  </button>
{{/if}}

twiddle.json

{
  "version": "0.10.4",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}