Select an input after its inserted using `Ember.run` - ember.js

Question

Updated — The problem with my solution below was with if statement around Ember.run. Removing it solved the problem, but my approach was also incorrect. Instead of scheduling the focus for after rendering, I should make a custom component as acorncom suggested.
Original Question:
I'm building a list of text inputs based on an array on my model. On newline I'd like to insert a new text field and then select it. I'm trying to do this with Ember.run.scheduleOnce, but the function I provide is never called.
I've reopened the textfield to expose a data-index attribute binding, and in my template am rendering:
{{#each model.entries as |entry index|}}
{{input value=entry.text class='field--entry' data-index=index insert-newline=(action 'insertEntry' index)}}
{{/each}}
In my controller:
actions: {
insertEntry(index){
// This works fine and a new textfield is added.
this.get('model.entries').addObject({text: 'Example'});
if (index){
Ember.run.scheduleOnce('afterRender', this, function(){
// This doesn't seem to work at all.
console.log("This is never logged");
$(".field--entry[data-index='" + index + 1 + "']").focus();
});
}
}
}

Answer 1

Per a work-in-progress branch here (https://github.com/ember-best-practices/recommendations/blob/initial-pass/guides/run.md), you generally want to steer clear of using afterRender if there are other approaches that would work better.
I'd suggest using a component to handle rendering your list of items, as you'd be able to use the component lifecycle hooks to do what you're after. If you check the guides (specifically the section discussing didRender), you'll see an example that closely matches what you're after ... https://guides.emberjs.com/v2.17.0/components/the-component-lifecycle/#toc_making-updates-to-the-rendered-dom-with-code-didrender-code

Answer 2

I don't think you need to manually manipulate the focus:
This Ember can set the autofocus attritbute on render.
"(eq index 0)" sets it to true on the first element only
{{#each model.entries as |entry index|}}
{{input value=entry.text autofocus=(eq index 0)}}
{{/each}}

Answer 3

There was a syntactic mistake in your template and I fixed it. I suspect that in your case the action was never called somehow. Can you check the twiddle I prepared for you? What it does is simply adding a new input and giving focus to it. I just changed the selection logic for jquery focusing to
Ember.$(`.field--entry:eq(${index+1})`).focus();
and it simply works as expected.