0

I created some lightning components to create search functionality for a community. The search results are organized into tabs. I'm having this issue where sometimes when the search results load, no tab is selected, so all I see is tabs and no results. I have to actually click on the tab to see the results. Does anyone know how to make a tabset automatically activate the first tab? This is what my tabset looks like:

  <lightning:tabset >
        <aura:iteration items="{!v.ResultObjectList}" var="results" indexVar="indx">
            <lightning:tab id="{!indx}">  
                <!-- In order to make the tabl label dynamic, I had to use aura:set rather than just label= above -->
                <aura:set attribute="label">
                    <!--In order to get each results list, call Apex to get the object type, and then return it, I had to make another component -->
                    <c:RecordTypeDisplay RecordList="{!results}" /> 

                </aura:set>

                <aura:iteration items="{!results}" var="result" indexVar="idx"  start="{!v.Start}" end="{!v.End}">  
                    <!--If it's a content object, make it public access, otherwise enforce member-->
                    <aura:if isTrue="{!indx == 1}">       
                    <!--Child Component - Pass values to it-->
                    <c:SearchPreview Title="{!result.PreviewTitle__c}" PreviewText="{!result.PreviewText__c}" JoinURL="" IsPublic="true" />

                        <aura:set attribute="else">
                            <c:SearchPreview Title="{!result.PreviewTitle__c}" PreviewText="{!result.PreviewText__c}" JoinURL="http://www.google.com" URL="" />
                        </aura:set>
                    </aura:if>
                </aura:iteration>
                <aura:if isTrue="{!greaterthan(results.length, v.End)}">
                    <ui:button press="{!c.nextPage}" label="Next Page"/>
                </aura:if>
                <aura:if isTrue="{!greaterthan(v.Start, 0)}">
                    <ui:button press="{!c.previousPage}" label="Previous Page"/>
                </aura:if>
            </lightning:tab>
        </aura:iteration>
    </lightning:tabset>

My results look like this sometimes (when you click on a tab, they appear): enter image description here

I want it to look like this when it loads: enter image description here

1
  • Thanks everyone for you help! This did the trick: <lightning:tabset selectedTabId = "tabNum0"> <aura:iteration items="{!v.ResultObjectList}" var="results" indexVar="indx"> <lightning:tab id="{!'tabNum' + indx}">
    – melsherm3
    Commented Jun 9, 2017 at 16:03

2 Answers 2

1

In lightning tabset there is something called 'selectedtabid' attribute.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_tabset.htm

If you give your tabs an id and set a default 'selectedtabid' it will automatically load by default.

1

You could focus on one tab after it has been loaded. .focus()

Markup

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<lightning:tab aura:id="{!indx}">  
   //your markup          
</lightning:tab>

JS

doInit : function(component, event, helper){
    var tab = component.find("yourIndx").getElement();
    tab.focus();
}

You must log in to answer this question.

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