[SalesForce] ui:inputSelect won’t let me select item

Lightning Component that has a ui:inputSelect drop down field.

This drop down is populated by using aura:iteration who's source is a list of Contacts (1 to many).

Problem is that when there is 1 value in the dropdown, accessing the 'selected' value from the Lightning Component Controller is not possible.

Best Answer

Taking a blind guess here on what could be the issue. You might have binded the js controller methods on an inappropriate event on the ui:select.

Take the following code for example

Lightning APP

<aura:application access="Global">
<aura:attribute name="contactLevel" type="String[]" default="Primary Contact"/>
<!-- NON WORKING SCENARIO -->
<ui:inputSelect aura:id="levels" label="Contact Levels 1" select="{!c.onSelectChange}">
    <aura:iteration items="{!v.contactLevel}" var="level">
        <ui:inputSelectOption text="{!level}" label="{!level}"/>
    </aura:iteration>
</ui:inputSelect>
<!-- WORKING SCENARIO -->
<ui:inputSelect aura:id="mylevels" label="Contact Levels 2" click="{!c.onSelectClick}">
    <aura:iteration items="{!v.contactLevel}" var="level">
        <ui:inputSelectOption text="{!level}" label="{!level}"/>
    </aura:iteration>
</ui:inputSelect>

Controller.js

  ({
    onSelectChange : function(component, event, helper) {
        console.log('***** Select Scenario ******');
        console.log(component.find("levels").get("v.value"));
    },
    onSelectClick : function(component, event, helper) {
        console.log('***** click Scenario ******');
        console.log(component.find("mylevels").get("v.value"));
    }
})

Both of these UI input Select elements take only 1 value in the aura:iteration. The former one is bound with the event select and the second one is bound with the event click.

The first one does not work because the select or change event will not fire until unless there is a change in the value, since there is only one value it will not fire. Hence we must use an event which will be more suitable for this scenario for example onclick or onblur kind of events which do not require a value change ( from old val --> new val ). Or you could use an external button or event (doInit kind of stuff) to capture this value.

This could be the reason why it would work for a list with multiple values and not with a single value. Check out this example. If this not suitable, do share the code and we can take a deeper look.

UISELECTCHANGE

Related Topic