component.find({ instancesOf : “lightning:input”}) return empty list in Summer ’18

by

With new Summer ’18 release following code returns empty list:

component.find("social-security-number-form").find({instancesOf : "lightning:input"})

“social-security-number-form” is an aura:id of components div wrapper.
In Spring ’18 this line returned a list of all inputs that I have in my form and also it works just fine if I replace lightning:input with ui:input.

Does anybody know why this approach is not working for lightning: components in new release?

Answer

I was going through some old unanswered questions and stumbled upon this. I am currently on Summer’18 and below worked for me. Perhaps it has been fixed? If not, are you able to provide steps to replicate this issue?

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">

    <div aura:id="myDiv">
        <lightning:input aura:id="input1" name="input1" value="Input 1"/>
        <lightning:input aura:id="input2" name="input2" value="Input 2"/>
        <lightning:badge label="Some Random Badge"/>
        <lightning:input aura:id="input3" name="input3" value="Input 3"/>
        <lightning:input aura:id="input4" name="input4" value="Input 4"/>
        <lightning:formattedDateTime value="1479944705000"/>
    </div>
    <lightning:button label="Find All Inputs" onclick="{!c.findAllLightningInputs}"/>

</aura:component>

Controller JS

({
    findAllLightningInputs: function(component, event, helper) {
        var myInputs = component.find("myDiv").find({instancesOf : "lightning:input"});
        alert('There are ' + myInputs.length + ' lightning:input elements within myDiv.');
        for(var i = 0; i < myInputs.length; i++)
            console.log('------> aura element in array value @ index ' + i + ' = ' + myInputs[i].get("v.value"));
    },
})

Attribution
Source : Link , Question Author : Alexey Yezhkov , Answer Author : Lightning Evangelist

Leave a Comment