1

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?

enter image description here

Thanks!

1
  • Code shouldn't've be presented as images and answers don't go in questions. Please take the tour and see How to Ask. Your information can be found in the revision history if you care to post your own answer.
    – isherwood
    Commented Sep 24, 2023 at 14:24

2 Answers 2

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.

1
  • I used this idea of getting the list of inputs, but modified a little bit to filter by a string Id. Thank you! Commented Mar 10, 2021 at 10:56
1

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.

1
  • Thank you for the answer! That's seems a clean solution. As this UI grows, I'll eventually ending doing this, to organize better the things. Commented Mar 10, 2021 at 11:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .