Focus on a text box in ember js


I am trying to change a text to a text box. If a user clicks the text, it will change to a test box and so they can edit the content. I have done that. I am able to set the focus by below code.

{{input autofocus=true}}

It only works for the first time. If I focus-out, the text box will again change to text content. If I click the text again, I am able to see the text box, but it is not in focus. Below is the code I am trying.

Component file:

import Ember from 'ember';

export default Ember.Component.extend({
  isTextBox: false,
  actions: {
    editTest() {
      this.set('isTextBox', true);
  focusOut() {
    this.set('isTextBox', false);

Template file:

<div onclick = {{action 'editTest'}}>
{{#if isTextBox}}
{{input autofocus=true}}

I am new to ember and I trying to do the focus without using jQuery.

Here is the twiddle

You can provide id to input helper,

{{input id='cat-text' }}

You can make it focus text field for every rendering,