0

I'm trying to change the selectedTabId of a tab item in aura and the component.find() is returning null, I think it has something to do with the tabs being within an aura:if block but i'm not sure. Any help would be greatly appreciated.

<aura:attribute name="id" type="Id"/>
<aura:attribute name="tabId" type="String" default="details"/>
<aura:handler name='BoatReviewAdded' event='c:BoatReviewAdded' action="{!c.onBoatReviewAdded}"/>
<lightning:card title="Boat Details">
        <aura:if isTrue="{! not(empty(v.id))}">
            <lightning:tabset aura:id="tabs" selectedTabId="{!v.tabId}">
                <lightning:tab label="Details" aura:id="details">
                    <c:BoatDetail boat="{!v.boat}"/>
                </lightning:tab>
                <lightning:tab label="Reviews" aura:id="viewReview">
                    
                </lightning:tab>
                <lightning:tab label="Add Review" aura:id="addReview">
                    <c:AddBoatReview boat="{!v.boat}"/>
                </lightning:tab>
            </lightning:tabset>
        </aura:if>

    </lightning:card>
onBoatReviewAdded: function(component, event, handler){
        console.log(JSON.stringify(component.find("details")));
        component.set("v.tabId", "viewReview");
        console.log("TAB ID HAS BEEN SET TO: " + component.get("v.tabId"));
    },

1 Answer 1

0

If aura:if isTrue currently evaluates to false, anything within the true (default) section is not rendered, so you can't access it. In addition, when the condition changes (true -> false or false -> true), you cannot access those components until a render cycle has occurred, as those happen after the event handler returns. In Aura, the typical way to do this is to wait asynchronously, as in:

setTimeout(
  $A.getCallback(
    () => {
      let details = component.find("details");
      // Do something with details here
    }
  )
);

You must log in to answer this question.

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