5

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;
    }

}

2 Answers 2

2

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.

1
  • That question had the same problem as me. I was able to remove the inputselectoption in the component and add a list with a single item with 'loading territories' to it at the beginning of the server call. That item is then replaced with the list returned from the server. Thanks for the link!
    – ChrisLuman
    Aug 8, 2016 at 20:50
0

The solution is to create the list entirely in HTML or entirely in code. I chose to create it entirely in code, but also keep the 'loading' message.

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}"/>
</aura:component>

Controller.js:

init: function (cmp, event, helper) {
    cmp.find('input_select').set('v.options', [{label: 'Loading territories...'}]);
    helper.buildDropdown(cmp, helper);
}

Helper.js:

buildDropdown: function (cmp) {
    var sessInfo = cmp.get('v.sessionInfo');
    var selectedSalesGroup = sessInfo['selectedSalesGroup'];
    var currAreaHierarchy = sessInfo['visibleAreaHierarchies'][selectedSalesGroup];

    var newSelectOpts = [];
    for (var region in currAreaHierarchy) {
        if (newSelectOpts.length>0) {newSelectOpts.push({label: ' ', value: ' ', disabled: true });}  //  put an unselectable blank option between regions
        newSelectOpts.push({class: 'regionSelectOption', label: region+' Region', value: region });

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

    cmp.find('input_select').set('v.options', newSelectOpts);
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .