How can I set focus on a lightning:input, generated inside a aura:iteration, from controller method triggered by another element's event?

Question

I have an Aura component with an aura:iteration that each iteration generates a lightning:formattedNumber, a hidden lightning:input (both for the same field), and a lightning:buttonIcon that calls a controller method that hides the first and shows the second one.

I want to show and focus the lightning:input after I click the button, but I'm not able to use the .focus() method, because I can't get the component with .find(), since It seems I can't dynamically set aura:id.

Also, I tried to use a parent span with an id to access the input tag generated by the lightning:input with something like document.querySelector('#myDynamicIdValue input'), but it returns only null.

How could I focus this input?

Thanks!

Answer 1

You can attach an iteration value to each row, then use that to figure out which input to focus.

<aura:iteration items="{!v.items}" var="item" indexVar="index">
  <div class="..." data-index="{!index}">
    ...
    <lightning:input aura:id="itemInput" ... />

Then, for your click handler:

onShowInlineEdit: function(component, event, helper) {
  let index = parseInt(event.target.closest("[data-index]").dataset.index);
  let inputs = component.find("itemInput");
  inputs[index].focus();
}

This is essentially a version of my own problem that I had.

Answer 2

One option is to create a component to contain the markup inside of aura:iteration.

This way there will be only one instance of lightning:input per inner component, thus the aura:id won't need to be dynamic and you can use component.find() to locate the lightning:input.