inputSelect does not update with component.set

Question

I'm struggling once again with simple lightning component behaviour. This time with the ui:inputSelect component.

I load the list dynamically like here below:

<ui:inputSelect label="Expense Sub-Type" aura:id="ExpenseSubType__c" class="slds-m-bottom--medium">
    <ui:inputSelectOption text="" label=""/>
    <aura:iteration var="subType" items="{!v.expenseSubtypes}">
        <ui:inputSelectOption text="{!subType}" label="{!subType}"/>
    </aura:iteration>
</ui:inputSelect>

Then when a user clicks a button, I set the value dynamically like this:

component.find('ExpenseSubType__c').set('v.value', 'Taxi');

This does not work. Sometimes it works when I click on it twice.

This is working fine with other components like text input fields, or text area, but not for the select.

Is this another bug in the lightning framework or am I missing something?

Answer 1

Have you tried to set an attribute variable instead of v.value property?

Something like:

<aura:attribute name="testing" type="String" />

<ui:inputSelect label="Expense Sub-Type" aura:id="ExpenseSubType__c" value="{!v.testing}" class="slds-m-bottom--medium">
    <ui:inputSelectOption text="" label=""/>
    <aura:iteration var="subType" items="{!v.expenseSubtypes}">
        <ui:inputSelectOption text="{!subType}" label="{!subType}"/>
    </aura:iteration>
</ui:inputSelect>

then in your function instead of doing : component.find('ExpenseSubType__c').set('v.value', 'Taxi');

you would do:

component.set(‘v.testing’, 'Taxi');

Answer 2

We can set values dynamically to ui:inputSelect. Refer here for details ui:inputSelect

In this case, the controller method testing can be redefined as follows.

testing : function(component, event, helper) {
    var opts = [
        { class: "optionClass", label: "Taxi", value: "Taxi", selected: "true" }
    ];
    component.find('ExpenseSubType__c').set('v.options', opts);
}

This code sets value of the ui:inputSelect as "Taxi". But one thing to note is that, this replaces all other select options with the value we give in this method.