[SalesForce] Dynamic inputSelect options not showing first value

I've got a ui:inputselect picklist that is populated from a call to the server. The first value I get I'm setting to be the default by setting selected to true. I put a break in the js code to see what's happening and it is showing that it has a selected value of true and all other values don't have selected = true.

On page load the second value in the picklist is showing as default and the first value isn't populating until I select something else in the picklist and then try to choose again. What's weird is the first time I made the change to set the picklist option as selected it worked. I reloaded the page (with no changes) to see it wasn't working again.

Component.cmp:

<aura:component controller="DropdownAreaSelectionController">
<aura:registerEvent name="areaSelectionEvent" type="c:AreaSelected" />

<aura:handler name="init" value="{!this}" action="{!c.init}" />

<ui:inputselect aura:id="input_select" change="{!c.handleChange}">
    <ui:inputselectoption text="Loading territories..." label="Loading territories..." />
</ui:inputselect>

Controller.js:

init: function (cmp, event, helper) {
    var action = cmp.get('c.APEX_getAreaHierarchy');

    action.setCallback(this, function(resp) {
        var state=resp.getState();

        if (state==='SUCCESS') {
            var retVal = resp.getReturnValue();

            var newSelectOpts = [];
            var isCurrentSelected = true;
            for (var region in retVal) {
                if (newSelectOpts.length>0) {newSelectOpts.push({label: ' ', value: ' ', disabled: true });}
                newSelectOpts.push({class: 'regionSelectOption', label: region+' Region', value: region, selected: isCurrentSelected });
                isCurrentSelected = false;

                for (var territoryId in retVal[region]) {
                    newSelectOpts.push({class: 'territorySelectOption', label: retVal[region][territoryId], value: territoryId });
                }
            }

            cmp.find('input_select').set('v.options', newSelectOpts);
        } else {
            console.log('ERROR FROM SERVER');
        }
    });

    $A.enqueueAction(action);
}

This sets up the picklist in this fashion:

Region 1     <--should be default
 Territory 1 <--showing as default
 Territory 2
 Territory 3

Region 2
  Territory 1
  Territory 2

ServerController.cls:

public class DropdownAreaSelectionController {

    @AuraEnabled
    public static Map<String, Map<String, String>> APEX_getAreaHierarchy() {
        Map<String, Map<String, String>> areaHierarchy = TerritoryUtil.getAreaHierarchy(Util.SALES_GROUP);

        return areaHierarchy;
    }

}

Best Answer

Your issue could be related to the problem mentioned here

What I did to get around this was to define all my lists in the Apex controller, like this:

First, make an inner Apex object:

public  class SelectItem {
  @AuraEnabled
  public String label {get; set;}
  @AuraEnabled
  public String value {get; set;}
  @AuraEnabled
  public String class {get; set;}
  @AuraEnabled
  public Boolean selected {get; set;}
}

Using this object, you'd run all the logic you have above in the Apex controller, outputting a list of this custom inner object.

Then, define an attribute of this type in the component:

<aura:attribute name="stageNameValues" type="CustomController.SelectItem[]" />

Then, use an iteration to define the inputselect:

<ui:inputSelect class="slds-select " value="{!v.opportunity.StageName}" updateOn="change" label="Stage" labelClass="slds-form-element__label " requiredIndicatorClass="slds-required" required="true" >
  <aura:iteration items="{!v.stageNameValues}" var="source">
    <ui:inputSelectOption text="{!source.value}" label="{!source.label}" />
  </aura:iteration>
</ui:inputSelect>

Finally, set the attribute when your getter from the Apex class returns:

cmp.set("v.stageNameValues", response.getReturnValue());

This is verified to work. Kind of a pain, I know.

Related Topic