[SalesForce] How do use lightning:Select within a renderIf in a lightning component

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>

Best Answer

Credit goes to sfdcfox for this with this one. The aura:renderIf being deprecated, simply replacing the aura:renderIf with aura:if fixed the issues.

Related Topic