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

  • 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 Jun 9 '17 at 16:03
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.

0

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();
}

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.