How to set the options of a dynamically created lightning:select?
To set the options, you need to set the component's body. Intuitive, no? Here's a demo for you:
({
init: function(component, event, helper) {
$A.createComponents(
[
[
"lightning:select", { label: "Select List", name: "list1"}
],
[
"option", { value: "Option 1", label: "Option 1" }
],
[
"option", { value: "Option 2", label: "Option 2" }
]
],
function(components) {
components[0].set("v.body", [components[1], components[2]]);
component.set("v.body", components[0]);
}
);
}
})
<aura:application extends="force:slds">
<aura:handler name="init" value="{!this}" action="{!c.init}" />
{!v.body}
</aura:application>
Inspired by this DouglasCAyers/sfdc-lightning-picklist-field-component, a workaround that appears to work (and not be sensitive to debug mode being enabled) is to dynamically create this component that iterates over the options:
<aura:component>
<aura:attribute name="name" type="String"/>
<aura:attribute name="label" type="String"/>
<aura:attribute name="value" type="String"/>
<aura:attribute name="options" type="List"/>
<lightning:select name="{! v.name }" label="{! v.label }" value="{! v.value }">
<aura:iteration var="option" items="{! v.options }">
<option value="{! option.value }">{! option.label }</option>
</aura:iteration>
</lightning:select>
</aura:component>
If there is a way to avoid this level of indirection and have cleaner code I would move to it and accept the answer.