7

I'm trying to get the value of a data attribute from a button calling a client side controller. However, when the button is inside an aura:if tag, it's not working:

Component

<aura:if isTrue="true">
    <button class="slds-button slds-button--brand" type="button" onclick="{!c.showMeMyAttribute}" id="myAwesomeId" data-customattribute="HelloWorld">Click me please!</button>
</aura:if>

Controller

showMeMyAttribute : function(component, event, helper) {
    console.log('id: ' + event.srcElement.id);
    console.log('customattribute: ' + event.currentTarget.dataset.customattribute);
}

In this case, dataset is undefined. I also tried using srcElement, but id is undefined too.

However, with aura:renderIf it's working fine, but as it's deprecated I guess it should be working with aura:if too. Any idea ?

3

This is a known issue that that we're working on. Please open a case to track and tell them to link to the internal work item W-3206803.

1

Hmm, it would indeed seem that Lightning Locker treats the body of that aura:if as belonging to another namespace so the DOM elements are not visible.

So while I would definitely classify this as needing a fix, in this use case it could easily be worked around. You don't need the button to cease to exist completely under your condition, just to hide it. So you could use conditional classes:

<button class="{!'slds-button slds-button--brand' + if(v.someBoolean, '', ' sdls-hide')}" 
type="button" onclick="{!c.showMeMyAttribute}" id="myAwesomeId" 
data-customattribute="HelloWorld">Click me please!</button>

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.