I am trying to dynamically change whether a picklist is multiselect or just a single select based upon a field selected in the parent component to this, for example the field selected is a multiselect field on an object the component will render a multiselect picklist with all the possible picklist values available. However when I try to run the app, the error, "This page has an error. You might just need to refresh it. Aura.loadComponent(): Failed to initialize application.", occurs and I can't figure out why. If I comment out both the ui:inputSelect and the lightning:Selects it correctly displays MULTIPICKLIST or PICKLIST. I don't think this is an issue with my logic, I'm just wondering if I'm missing anything when it comes to including picklists within renderIf statements? I have read elsewhere, , about issues with iterations within renderIfs but adding divs still did not fix the issue.
Attributes
<aura:attribute name="isPicklist" type="Boolean" default="false" description="Is a picklist"/>
<aura:attribute name="isMulti" type="Boolean" default="false" description="Is a multiselect"/>
<aura:attribute name="picklistOptions" type="Object[]" description="Collection of picklist objects"/>
A little note here is that the picklistOptions attribute is an array of javascript objects structured like:
[{
label: 'label1',
value: 'value1'
},{
label: 'label2',
value: 'value2'
}]
Component
<aura:renderIf isTrue="{!v.isPicklist}">
<aura:renderIf isTrue="{!v.isMulti}">
<p>MULTIPICKLIST</p>
<div>
<ui:inputSelect aura:id="input" multiple="true" label="Condition" change="{!c.fieldChanged}">
<aura:iteration items="{!v.picklistOptions}" var="opt">
<option value="{!opt.value}" text="{!opt.label}" />
</aura:iteration>
</ui:inputSelect>
</div>
<aura:set attribute="else">
<p>PICKLIST</p>
<div>
<lightning:Select aura:id="input" label="Condition" onchange="{!c.fieldChanged}">
<option value="" text="--None--" />
<aura:iteration items="{!v.picklistOptions}" var="opt">
<option value="{!opt.value}" text="{!opt.label}" />
</aura:iteration>
</lightning:Select>
</div>
</aura:set>
</aura:renderIf>
</aura:renderIf>