Ask Search:
SAI SINDHU GANDUSAI SINDHU GANDU 

How to set focus to the next field on selection of previous field in lightning component?

On Selection of a value in "Quantity" field, Next field "Width" has to be focused.

<lightning:select aura:id="required1" name="tire1Quantity" onchange="{!c.handleT1SearchQuantityChange}" label="Quantity" variant="standard" value="{!v.search.frontQuantity}" required="true" messageWhenValueMissing="This field cannot be blank." > 
        <option value="" text="" selected="{!v.search.frontQuantity==''}"></option>
               <aura:iteration items="{!v.initResponse.quantities}" var="val">
                     <option value="{!val}" text="{!val}" selected="{!v.search.frontQuantity==val}"></option>
               </aura:iteration>
</lightning:select>

<lightning:select aura:id="required2" name="tire1Width" label="Width" variant="standard" value="{!v.search.frontWidth}" required="true" messageWhenValueMissing="This field cannot be blank."> 
          <option value="" text="" selected="{!v.search.frontWidth==''}"></option>
                  <aura:iteration items="{!v.initResponse.widths}" var="width">
                      <option value="{!width}" text="{!width}" selected="{!v.search.frontWidth==width}"></option>
                 </aura:iteration>
</lightning:select>
User-added image
As Quantity is selected to "1", Focus should move to Width.

 handleT1SearchQuantityChange : function(component, event, helper) {
       document.getElementById("required2").focus();
}

This is what I have tried. But It doesn't work. document.getElementById is returning null. Please give me some suggestions that could help me set focus.
Steve BainesSteve Baines
handleT1SearchQuantityChange : function(component, event, helper) {
       var input = cmp.find("required2");
       input.focus();
}

Try this
SAI SINDHU GANDUSAI SINDHU GANDU
handleT1SearchQuantityChange : function(component, event, helper) {
       var input = component.find("required2");
        console.log(input);
        input.focus();
}

I tried this .. But no output.
Found this console:-

User-added image
   
Steve BainesSteve Baines
Try adding 'access=GLOBAL' to your lightning select component
SAI SINDHU GANDUSAI SINDHU GANDU
Yes, Included that already.
Steve BainesSteve Baines
Alright, how about:
handleT1SearchQuantityChange : function(component, event, helper) {
    component.find("required2").getElement().focus();
}
SAI SINDHU GANDUSAI SINDHU GANDU
No. It didn't work either. 

Its showing an error - Cannot readproperty focus().
Geetha CharanGeetha Charan
@Sai Sindhu Gandu did you figure out the solution for this?
Joseph MarkeyJoseph Markey
I've found that using the JavaScript window.setTimeout() function is sometimes required to set focus. For example, setting focus within the init() function requires the setTimeout() function. Here's an example using the Lightning frame work:

        window.setTimeout(
            $A.getCallback(function () {
                cmp.find("solutionName").focus();
            }), 1
        );