+ Start a Discussion
Aruna VasahanAruna Vasahan 

picklist field in lightning component throwing error

I have designed a lightning component to fetch record details. I am having this lightning component in the record detail page. I am also having picklist field inside the component. When I simply place picklist field inside component and try to fetch and display picklist values inside the component its working.
 
<aura:attribute name="recordId" type="String" default="{!v.recordId}"/> 
     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
      <aura:attribute name="myObject" type="String" default=""/>
   <aura:attribute name="objInfo" type="case" default="{sobjectType : 'Case'}" />
 <div id="gee" class="slds slds-scrollable--x">

   <ui:inputSelect aura:id="cirjustification" class="slds-select" label="" value="{!v.myObject.CIRJustification__c}"/> 
<lightning:button variant="brand" label="Submit" onclick="{!c.myAction}" />
 </div>

But if I add lightning tabset to the code, I am getting apex error.
<lightning:tabset >
  <lightning:tab label="Main">    
  <div id="gee" class="slds slds-scrollable--x">
   <ui:inputSelect aura:id="cirjustification" class="slds-select" label="" value="{!v.myObject.CIRJustification__c}"/> 
<lightning:button variant="brand" label="Submit" onclick="{!c.myAction}" />
 </div>
   </lightning:tab>
</lightning:tabset>

Error : 
User-added image
I can find that the error is because the value cannot be set properly, but don't know how to do this. Can anyone help?
My controller code
({

 doInit: function(component, event, helper) {
    helper.fetchPickListVal(component, 'CIRJustification__c', 'cirjustification');
}
})

Helper code​
({
fetchPickListVal: function(component, fieldName, elementId) {
    var action = component.get("c.getselectOptions");
    action.setParams({
        "objObject": component.get("v.objInfo"),
        "fld": fieldName
    });
    var opts = [];
    action.setCallback(this, function(response) {
        if (response.getState() == "SUCCESS") {
            var allValues = response.getReturnValue();

            if (allValues != undefined && allValues.length > 0) {
                opts.push({
                    class: "optionClass",
                    label: "--- None ---",
                    value: ""
                });
            }
            for (var i = 0; i < allValues.length; i++) {
                opts.push({
                    class: "optionClass",
                    label: allValues[i],
                    value: allValues[i]
                });
            }
            component.find(elementId).set("v.options", opts);
        }
    });
    $A.enqueueAction(action);
},


Apex class
@AuraEnabled
  public static List < String > getselectOptions(sObject objObject, string fld) {
system.debug('objObject --->' + objObject);
 system.debug('fld --->' + fld);
 List < String > allOpts = new list < String > ();
 // Get the object type of the SObject.
Schema.sObjectType objType = objObject.getSObjectType();

// Describe the SObject using its object type.
Schema.DescribeSObjectResult objDescribe = objType.getDescribe();

// Get a map of fields for the SObject
map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap();

// Get the list of picklist values for this field.
list < Schema.PicklistEntry > values =
 fieldMap.get(fld).getDescribe().getPickListValues();

// Add these values to the selectoption list.
for (Schema.PicklistEntry a: values) {
 allOpts.add(a.getValue());
}
system.debug('allOpts ---->' + allOpts);
allOpts.sort();
return allOpts;
}

 
Best Answer chosen by Aruna Vasahan
{!Piyush_soni__c}{!Piyush_soni__c}
Hey Aruna,
  this is a rendering issue, call your helper method [fetchPickListVal] when tab is active, so all content load in actived tab and it can set the 'options' on inputSelect . 

here is the workaround for it :

remove the aura init handler :  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="recordId" type="String" default="{!v.recordId}"/> 
      <aura:attribute name="myObject" type="String" default=""/>
      <aura:attribute name="objInfo" type="case" default="{sobjectType : 'Case'}" />
	  
	  <!--new attribute -->
	   <aura:attribute name="runOnce" type="boolean" default="true"/>
   
<lightning:tabset >
  <lightning:tab label="Main" onactive="{!c.doInit}">    
  <div id="gee" class="slds slds-scrollable--x">
   <ui:inputSelect aura:id="cirjustification" class="slds-select" label="" value="{!v.myObject.CIRJustification__c}"/> 
<lightning:button variant="brand" label="Submit" onclick="{!c.myAction}" />
 </div>
   </lightning:tab>
</lightning:tabset>

* call doInit when tab is active :

Js :
doInit: function(component, event, helper) {
        if(component.get("v.runOnce")){
          helper.fetchPickListVal(component, 'CIRJustification__c', 'cirjustification');
          component.set("v.runOnce" , false); 
        }
    },

This will solve your issue

Thanks let us know if it helps you
http://sfdcmonkey.com
 

All Answers

{!Piyush_soni__c}{!Piyush_soni__c}
Hey Aruna,
  this is a rendering issue, call your helper method [fetchPickListVal] when tab is active, so all content load in actived tab and it can set the 'options' on inputSelect . 

here is the workaround for it :

remove the aura init handler :  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="recordId" type="String" default="{!v.recordId}"/> 
      <aura:attribute name="myObject" type="String" default=""/>
      <aura:attribute name="objInfo" type="case" default="{sobjectType : 'Case'}" />
	  
	  <!--new attribute -->
	   <aura:attribute name="runOnce" type="boolean" default="true"/>
   
<lightning:tabset >
  <lightning:tab label="Main" onactive="{!c.doInit}">    
  <div id="gee" class="slds slds-scrollable--x">
   <ui:inputSelect aura:id="cirjustification" class="slds-select" label="" value="{!v.myObject.CIRJustification__c}"/> 
<lightning:button variant="brand" label="Submit" onclick="{!c.myAction}" />
 </div>
   </lightning:tab>
</lightning:tabset>

* call doInit when tab is active :

Js :
doInit: function(component, event, helper) {
        if(component.get("v.runOnce")){
          helper.fetchPickListVal(component, 'CIRJustification__c', 'cirjustification');
          component.set("v.runOnce" , false); 
        }
    },

This will solve your issue

Thanks let us know if it helps you
http://sfdcmonkey.com
 
This was selected as the best answer
Aruna VasahanAruna Vasahan
Hi Piyush,
            Thanks, your solution solved my problem.
Thanks
Aruna Vasahan