4

I have a custom popup component for displaying help text near form fields.
I wanted to make it more dynamic - make the position of the nubin a component attribute. And Now I'm facing a strange behaviour I don't understand. This is the original code:

<button  class="slds-button slds-button_icon" onclick="{!c.handleToggle}" />

<section aura:id="helpPopup" class="slds-popover slds-nubbin_left-top slds-hide" > 
...
</section>

and the controller's code to toggle visibility of popup on button click

handleToggle:function(component, event, helper) {
    var help = component.find("helpPopup");
    $A.util.toggleClass(help, 'slds-hide');            
},

the code above works well, this code also works well (class replaced with expression)

<section aura:id="helpPopup" class="{! 'slds-popover slds-nubbin_left-top slds-hide'}" />

But this prevents popup from showing up although the html code looks identical

    <aura:attribute name="nubinSldsClass" type="String" default=" slds-nubbin_left-top" />        <!--  -->

    <section aura:id="helpPopup" class="{! 'slds-popover '+v.nubinSldsClass+' slds-hide '}" />
1
  • I had a look at the Aura code in the debugger and in the remove class case got to var oldClass = element.$getShadowAttribute$(attribute); returning an empty string for the attribute "v.HTMLAttributes.class" which then stopped the method doing anything because of a later oldClass !== constructedClass check: no "slds-hide' required and none present so do nothing. So at first sight it looks like a bug... – Keith C Jan 2 '18 at 15:11
3

I had faced the same problem many time. If we use the expression for class in cmp file then I was not able to add classes dynamically in js.

so there are 2 ways either make your whole logic of adding classes in expression or in js.

you can have one private attribute lets say showHide nubbin.

<aura:attribute name="showNubbin" type="Boolean" default="true" />
<section aura:id="helpPopup" class="{!join(' ','slds-popover ',v.nubinSldsClass,(v.showNubbin ? '' , 'slds-hide'))}" />

in js

handleToggle:function(component, event, helper) {
    component.set('v.showNubbin',!component.get('v.showNubbin'));            
},

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.