Ember.js: Input autofocus only works on first render

[olivierlesnicki]

https://ember-twiddle.com/f5b03da876189e65370402daca33e56c?openFiles=controllers.application.js%2C

Steps to replicate:

• Click on autofocus once, the input is correctly autofocused
• Click twice, it is not anymore (unless app is reloaded)

[acorncom]

Confirmed, I'm seeing this behavior too. The issue seems to be that the input once generated doesn't properly re-focus when it is hidden and then shown again ...

[Serabe]

I am not sure this is an Ember bug. autofocus behaviour is not that simple to grasp, but this thing happens in the following contexts too:

• Firefox (it does not autofocus even the first time)
• Simple jQuery adding and removing html shows the same problem (jsbin)
• Same example but with just <input autofocus> (twiddle)

I am not sure this is a bug and, if it is, that is on our side.

[Serabe]

I am closing the issues for the reasons above. Feel free to reopen if you still think this is an Ember issue.

Thank you!

[Glarregle]

Experienced the same problem here.
Couldn't find better solution than calling
this.$('input').focus()
inside didInsertElement() hook.

[statefull]

The "problem" is that autofocus is applied when on page load event, so it is only applied the first time the page is loaded.

[Pieter-Rees]

I solved it like this without Jquery:
this.get('element').querySelector('.selector').focus()
You can put it, for example in the didInsertElement hook.