Ember: simple way to set focus in a field

Question

I am looking for a simple way to set focus into a textfield or textarea. I prefer not to mix Jquery syntax with Ember syntax ... and I prefer not to create seperate views for each textfield or textarea in which I ever want to set the focus.

Any suggestions ?

My textArea field is simply:

{{view Ember.TextArea valueBinding="body" placeholder="body"}}

Thanks Marc

score 6 · Answer 1 · answered Feb 24 '15 at 19:07

6

With new Ember CLI you get this using simply autofocus="autofocus" in template *.hbs

{{input value=text type="text" name="text" placeholder="Enter text" autofocus="autofocus"}}

answered Feb 24 '15 at 19:07

David Douglas

10,377
2
55
53

1

Works great, thx. One oddity is that it doesn't work if the input is empty to begin with. – Joe Mar 28 '15 at 01:52
3

Another oddity is if the input is inserted into the dom, removed, and inserted again the second time it's inserted it doesn't autofocus. – Patrick Berkeley Feb 04 '16 at 17:44
1

this simply proxies the attribute to the html element [input#autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) which depends on the DOMContentLoaded event. Which is why it only happens for the input once the first time, until you load the page – Misterparker Feb 20 '16 at 02:09
RE: "This doesn't seem to be working in 2.13" - to be more specific, I have a 'register' route(input autofocuses) then transition to 'login' route where there is a similar input (different name/id)(doesn't autofocus) – sheriffderek Jul 08 '17 at 19:50

score 5 · Accepted Answer · edited Jan 09 '18 at 08:10

The most straightforward way to set the focus on a TextArea would be the following:

App.FocusTextArea = Ember.TextArea.extend({
  didInsertElement: function() {
    this._super(...arguments);
    this.$().focus();
  }
});

And the whenever you want such a view you can use it like so:

{{view App.FocusTextArea valueBinding="body" placeholder="body"}}

and I prefer not to create seperate views for each textfield or textarea in which I ever want to set the focus.

By creating a custom TextArea view which extends from Ember.TextArea you are not creating each time a new view, you are reusing the custom view with the desired behavior.

Hope it helps.

Clear and rather simple solution Thx. Marc – cyclomarc Jul 31 '13 at 10:55 — cyclomarc, Jul 31 '13 at 10:55

score 1 · Answer 3 · answered Jan 04 '14 at 02:19

This little package goes a step further and does this a slight bit more elegantly, directly in the template, without any further coding or subclassing:

<body>
  <!-- all the libraries -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
  <script src="http://rawgithub.com/AndreasPizsa/ember-autofocus/master/dist/ember-autofocus.min.js"></script>
  <!-- your template -->
  <script type="text/x-handlebars">
    Hello, world! {{ input }}
    :
    : more elements here
    :
    {{ autofocus }} {# <<<<< does the magic #}
  </script>
  <!-- your app -->
  <script>
    Ember.Application.create();
  </script>
</body>

You can get it from https://github.com/AndreasPizsa/ember-autofocus or with bower install ember-autofocus.

score 1 · Answer 4 · answered May 07 '16 at 20:28

1

You can create a component that wraps the input field and use the didInsertElement hook to focus the inner input:

In the template:

// template.hbs
{{#focus-input}}
  {{input type="text"}}
{{/focus-input}}

Your component:

// components/focus-input.js
import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement () {
    this.$('input').focus();
  }
});

answered May 07 '16 at 20:28

fguillen

36,125
23
149
210

It sure would be nice to just do something like `{{input id="id" initially-focused}}` or something. I guess you could extend the input helper to skip the nesting. – sheriffderek Jan 07 '18 at 17:50

score 0 · Answer 5 · answered Nov 09 '18 at 16:20

in my case this helps https://github.com/ember-a11y/ember-component-focus

component.coffee

import FocusableComponent from 'ember-component-focus/mixins/focusable-component'
export default Ember.Component.extend FocusableComponent,
  actions:
    show: () ->
      @set 'AddCardMode', true
      @focusAfterRender "#1"

template.emblem

if AddCardMode
  something input id=1

Ember: simple way to set focus in a field

5 Answers5

Linked