How to set the options of a dynamically created lightning:select?

Question

I'm using a $A.createComponent call to create a lightning:select component and in the "success" part of the callback trying to set the select options.

The "Generating Options on Initialization" section of the lightning:select documentation suggests that:

var opts = [
     { value: "Red", label: "Red" },
     { value: "Green", label: "Green" },
     { value: "Blue", label: "Blue" }
];
component.set("v.options", opts);

should work but I am getting this error:

Access Check Failed! AttributeSet.set(): 'options' of component 'markup://lightning:select {1:12;a}' is not visible to 'markup://c:wizGenericDetails {1:6;a}'.

reported in a "Sorry to interrupt" dialog. Seems to be blocked by design...

Any suggestions on what I might be doing wrong or on other ways to get options set?

PS

Bizarrely turning off debug mode as suggested in Enable Debug Mode for Lightning Components causes an error when using on a lookup field stops the error report but not managing to get the options set so far.

Answer 1

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>

Answer 2

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.