3

We have some lightning:select code that looks like this:

<lightning:select onchange="{!c.onStatusChange}">
    <aura:iteration items="{!v.statusOptions}" var="option">
        <option text="{!option}" label="{!option}" value="{!option}" selected="{!option.selected}" />
    </aura:iteration>
</lightning:select>

Starting Summer18 we noticed that sometimes the first element is selected even though we'd expect some other element to be selected (based on the selected attribute of the child options).

Looking through the documentation I noticed that the lightning:select element has a value property defined like so:

The value of the select, also used as the default value to select the right option during init. If no value is provided, the first option will be selected.

This doesn't mention the option element's selected attribute at all, implying I guess that this is ignored?

And sure enough, setting the value attribute on the lightning:select seemed to fix things:

<lightning:select onchange="{!c.onStatusChange}" value="{!v.selectedOption}">
    <aura:iteration items="{!v.statusOptions}" var="option">
        <option text="{!option}" label="{!option}" value="{!option}" selected="{!option.selected}" />
    </aura:iteration>
</lightning:select>

But this has me questioning the purpose of using the selected attribute on the option element at all! I noticed though that the code in the documentation has both the value attribute set on the lightning:select element and also the selected attribute set on the option element:

here's the example code provided in the above documentation link under the heading Generating Options On Initialization:

<aura:component>
    <aura:attribute name="options" type="List" />
    <aura:attribute name="selectedValue" type="String" default="Red"/>
    <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
    <lightning:select name="mySelect" label="Select a color:" aura:id="mySelect" value="{!v.selectedValue}">
        <aura:iteration items="{!v.options}" var="item">
            <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
         </aura:iteration>
    </lightning:select>
</aura:component>

My question is, what is the purpose of using both the value attribute on the lightning:select element and the selected attribute on option? Should I not expect the selected attribute to take precedence?!

3

I also noticed this problem and I figured out that using lightning:select is not the best way to display a combo box because of the aura:iteration.

There is a lightning:combobox component that is more convenient because its syntax is shorter and it does not have this bug:

<aura:attribute name="status" type="String" default="new"/>
<aura:attribute name="statusOptions" type="List" default="[
    {'label': 'New', 'value': 'new'},
    {'label': 'In Progress', 'value': 'inProgress'},
    {'label': 'Finished', 'value': 'finished'},
    ]"/>

<lightning:combobox name="progress" label="Status" value="{!v.status}" placeholder="Select Progress" options="{!v.statusOptions}"/>

Documentation: https://developer.salesforce.com/docs/component-library/bundle/lightning:combobox/example

  • i don't love the answer of just use something else. but considering the docs are so poor i'm willing to accept your answer as the unofficial documentation stating deprecated, use combobox :-/ – hackerhasid May 30 '18 at 15:56

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.