6

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.

  • 1
    I'm going to submit a Feedback to the documentation team. You should, too. – sfdcfox Nov 24 '17 at 0:16
7

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>
  • I've expanded the code in the question to be clearer. The example I was looking at sets a JavaScript array in v.options; I think the v.body makes sense when setting nested components. Am trying to keep the code simple by not having to create components for the options. – Keith C Nov 24 '17 at 9:08
5

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.

  • This works for me in Chrome and Edge but not in Firefox. In Firefox, the picklilst options do not display. Thoughts? – Michele Kleinhomer Mar 20 at 11:59
  • @MicheleKleinhomer Nothing comes to mind; see what is going on in Firefox via the Developer Tools. – Keith C Mar 20 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.