Display picklist field in lightning component throwing error

Question

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

Answer 1

Lightning:tab component creates its body during runtime. You won’t be able to reference the component during initialization or afterender. You can set your content using value binding with component attributes instead.

example:

component:

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="options" type="list"/>
    <lightning:tabset >
        <lightning:tab label="Main">    
            <div id="gee" class="slds slds-scrollable--x">
                <ui:inputSelect aura:id="cirjustification" class="slds-select" label="" value="a1">
                    <aura:iteration items="{!v.options}" var="opt">
                        <ui:inputSelectOption text="{!opt.label}" label="{!opt.label}" value="{!opt.value}"/>
                    </aura:iteration>
                </ui:inputSelect>
                <lightning:button variant="brand" label="Submit" onclick="{!c.myAction}" />
            </div>
        </lightning:tab>
    </lightning:tabset>
</aura:component>

Controller:

 doInit: function(component, event, helper) {
         var opts = [];

    opts.push({
        class: "optionClass",
        label: "--- None ---",
        value: ""
    });
    for (var i = 0; i < 5; i++) {
        opts.push({
            class: "optionClass",
            label:'a'+i,
            value: 'a'+i
        });
    }
    component.set("v.options", opts);
    }