3

I have a page that gets the record type of an object and displays it in a picklist in a lightning component, but when the object gets rendered, only 2 options show up in the picklist. initial picklist values

After selecting one of the options, the picklist rerenders and shows all the options. Picklist after select

It is doing this for all of the picklists on the page and has the same behavior for all of them.

Below is a sample code that populates the picklist dynamically and will illustrate the issue if run in any org.

sampleIssue.cmp

<aura:component implements="force:appHostable">
    <fieldset class="slds-form--compound">

        <div class="form-element__group">
          <h3 class="slds-section-title--divider">Product Information</h3>   
          <div class="slds-form-element__row"/>        
          <div class="slds-form-element__row">
            <div class="slds-form-element slds-size--1-of-2">
        <ui:inputSelect class="slds-select" aura:id="lob" change="{!c.handleSelect}">
            <ui:inputSelectOption text="--Select Product--" value="0"/>
            <ui:inputSelectOption text="Product 1" value="1"/>
            <ui:inputSelectOption text="Product 2" value="2"/>
            <ui:inputSelectOption text="Product 3" value="3"/>
            </ui:inputSelect>
            </div>
            <div class="slds-form-element slds-size--1-of-2">
              <ui:inputSelect class="slds-select" aura:id="productType">
                  <ui:inputSelectOption text="--Select Product--" value="0"/>
                </ui:inputSelect>

            </div>
          </div>
          <div class="slds-form-element__row"/>   
        </div>
      </fieldset> 
</aura:component>

sampleIssueController.js

({
    handleSelect : function(cmp, event) {
        var selectCmp = cmp.find("lob").get("v.value");
        console.log(selectCmp);

        var opts;
        console.log(selectCmp);
        switch(selectCmp)
        {
            case "Product 1":
               opts = [
                   { class: "optionClass", label: "--Select Product--", value: "0", selected: "true" },
                   { class: "optionClass", label: "SubProduct 1.1", value: "SP11"},
                ];
                break;
            case "Product 2":
                opts = [
                   { "class": "optionClass", label: "--Select Product--", value: "0", selected: "true" },
                   { "class": "optionClass", label: "SubProduct 2.1", value: "SP21"},
                ];
                break;
            case "Product 3":
                opts = [
                   { "class": "optionClass", label: "--Select Product--", value: "0", selected: "true" },
                   { "class": "optionClass", label: "SubProduct 3.1", value: "SP31"},
                ];
                break;
            default:
                opts = [
                    { "class": "optionClass", label: "--Select Product--", value: "0", selected: "true" }
                ];
                break;
        }
        cmp.find("productType").set("v.options", opts);
    },

    handleProduct: function(cmp, evt){

    }
})
1
  • Please post your component's code too.
    – Praveen
    Apr 14 '16 at 12:04
1

Salesforce support verified that this is a bug that is now on the backlog to be fixed hopefully in summer 16. The workaround that I figured out was to define the select list entirely in code, or entirely in html. It is the combination of an html defined select list being overwritten in JS that causes the bug.

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.