I currently have setup in my org the following component structure
- Base Component
- $A.createComponent [`c:AutocompleteLookup`]
- Inline [Component B]
- Inline aura:iteration [`c:AutocompleteLookup`]
c:AutocompleteLookup will work if I don't do the aura:iteration and only create it once in the base component dynamically.
If I use aura:iteration then the c:AutocompleteLookup component still loads in the base component but some of the attributes for the lightning:input are missing and the onchange event no longer fires. However the aura:iteration instances of the component c:AutocompleteLookup work perfectly and all attributes exist and the onchange events fire.
Any thoughts on the best way to resolve this?
<!-- Visualforce Markup -->
<apex:page sidebar="false" showHeader="false" standardStyleSheets="false">
<apex:includeLightning />
<apex:includeScript value="/lightning/lightning.out.js" />
<div id="lightning" />
<script>
$Lightning.use("c:ConsoleFilterTestApplication", function() {
$Lightning.createComponent(
"c:BaseComponent",
{},
"lightning",
function(cmp) {
});
});
</script>
</apex:page>
<!-- Lightning App Markup -->
<aura:application access="GLOBAL" extends="ltng:outApp" >
<aura:dependency resource="c:BaseComponent"/>
</aura:application>
<!-- Markup for Extended Base Component -->
<aura:component>
<!-- Informs the filter its a isOptionB component -->
<aura:handler name="init" value="{!this}" action="{!c.isOptionB}"/>
<div class="slds-p-top--small slds-col slds-size--1-of-6">
<label class="slds-form-element__label slds-p-left--large" for="select-01">Group By: </label>
</div>
<div class="slds-col slds-size--5-of-6">
<div class="slds-form-element__control slds-p-left--small slds-form-element__control--width">
<div class="slds-select_container">
<select id="groupBy-select-field" aura:id="groupBy-select-field" class="slds-select" onchange="{!c.selectChange}">
<option>Option A</option>
<option>Option B</option>
</select>
</div>
</div>
</div>
</aura:component>
<!-- Markup for BaseComponent -->
<aura:component extends="c:componentWrapper" extensible="true">
{!v.body}
<div class="slds-grid slds-nowrap">
<div class="slds-col slds-size--1-of-1">
{!v.autoCompleteComponent}
</div>
<aura:if isTrue="{!v.check}">
<c:ComponentB ###ATTRIBUTESREMOVED### />
<aura:set attribute="else">
<c:ComponentC ###ATTRIBUTESREMOVED### />
</aura:set>
</aura:if>
</div>
<!-- Controller for Base Component -->
$A.createComponent(
"c:AutocompleteLookup",
autoCompleteAttributes,
function(newLookup, status, errorMessage){
console.log(status, errorMessage, newLookup);
if (status === "SUCCESS") {
component.set("v.autoCompleteComponent", [newLookup]);
newLookup.addHandler("AutocompleteLookupEvent", component, "c.handlePropertySelection");
} else if (status === "ERROR") {
console.log("Error: " + errorMessage);
}
}
);
<!-- Markup for Component Wrapper -->
<aura:component extensible="true">
<aura:attribute name="valueAA" type="String" />
{!v.body}
</aura>
<!-- Markup for Component B -->
<div>
<aura:iteration items={!v.a} var={result} />
<aura:iteration items={!result.b} var={secondResult} />
<c:AutocompleteLookup ##ATTRIBUTESREMOVED## />
</aura:iteration>
</aura:iteration>
</div>
<!-- Markup for AutocompleteLookup -->
<div>
<lightning:input aura:id="{!v.auraIDForLInput}" type="text" name="LightningLookup" label="{!v.label == null ? 'Lookup' : v.label}"
class="{!(v.inline ? 'inlineMode ' : '') + (v.label == null ? 'hideLabel' : '')}" value="{!v.searchValue}" onchange="{!c.onSearchChange}" placeholder="{!v.placeholder}" />
</div>
