Question

I want to be able to set the focus to a textarea as a result of a mouse click not in that task area.

As a minimal example, let’s say that I’m starting with a text and if you click on it, it gets replaced with a textfield. I can achieve this by a handlebars script:

<script type="text/x-handlebars">
  {{#if isActive}}
  {{view Ember.TextField}}
  {{else}}
  <p {{action foo}}> Click Here to Enter text  </p>
  {{/if}}
</script>

with a controller of

App.ApplicationController = Ember.Controller.extend({
    isActive: false,
    foo: function(){
       this.set("isActive", true);
    }
});

This works to create the textfield on the click, but does not give focus to that text area (it takes a second click to be able to actually enter text).

Is there a good way to achieve this end? I could do something hacky by setting an ID in the template and selecting it with jquery, but that seems inelegant.

Answer 1

Consider extending Ember.TextField as follows:

App.FocusedTextField = Em.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

Then change you handlebars template to use it instead:

<script type="text/x-handlebars">
  {{#if isActive}}
    {{view App.FocusedTextField}}
  {{else}}
    <p {{action foo}}> Click Here to Enter text  </p>
  {{/if}}
</script>