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

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 '16 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);
}

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.