Set focus to textarea in ember js

I am trying to change the text in a textbox. If the user clicks on the text, he switches to the test field and therefore can edit the content. I did it. I can set focus to below code.

{{input autofocus=true}}


It only works the first time. If I focus, the textbox changes to text content again. If I click the text again, I can see the textbox, but it is out of focus. Below is the code I am trying to do.

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 am trying to do focus without using jQuery.

Here is your review .


source to share

3 answers

You can provide id for helper input,

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


You can make this focal text box for every render,





You can do it in plain old Javascript like this:

    // This works but is not very ember-ish
    // document.getElementById('cat-text').focus();

    // For a component, you can do this


It assumes you have an input like this:

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


Ember 2.13+ no longer relies on jQuery (although some of the add-ons you use might be), so you have the option to eliminate the 35kb (min + gzip) that jQuery will add to your application's payload.



To expand on kumkanillam's answer, you can simply set focus at the end of the render lifecycle if it renders the textbox. Since you only have one text input in your component, you can simply find it using a selector. No need to worry about using jQuery here that it's there, so this is the Ember way.





All Articles