I am working on a dual stateful button, so I'm adding and removing the 'slds-is-pressed' class in the component controller file on button click.
The logic is working as expected- the button states are explicitly shown as per this link- https://www.lightningdesignsystem.com/components/buttons/#Dual-Stateful-Button.
Now I need to check if the button is currently pressed, so I used the component.find('myCmp').get('v.class')
as in this document- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm.
But the 'slds-is-pressed' class is not returned along with the other classes on the button.
Is this expected behavior? Can we not get the dynamically appended classes using the get('v.class')
method?
Markup:
<lightning:button label="Button1"
aura:id="statefulBtn1" title="Button1"
onclick="{! c.handleButtonClick }"
class="slds-col slds-size_1-of-2
slds-small-size_1-of-2
slds-large-size_1-of-4
slds-m-vertical_xx-small slds-button
slds-button_dual-stateful
slds-button_neutral
slds-p-left_xx-small slds-p-right_xxx-small"/>
<lightning:button label="Button2"
aura:id="statefulBtn2" title="Button2"
onclick="{! c.handleButtonClick }"
class="slds-col slds-size_1-of-2
slds-small-size_1-of-2
slds-large-size_1-of-4
slds-m-vertical_xx-small slds-button
slds-button_dual-stateful
slds-button_neutral
slds-p-left_xx-small slds-p-right_xxx-small"/>
Controller:
handleButtonClick : function(component, event, helper) {
if(event.getSource().getLocalId() == 'statefulBtn1'){
var cmpTarget = component.find('statefulBtn1');
$A.util.addClass(cmpTarget, "slds-is-pressed");
var cmpTarget = component.find('statefulBtn2');
$A.util.removeClass(cmpTarget, "slds-is-pressed");
}else if(event.getSource().getLocalId() == 'statefulBtn2'){
var cmpTarget = component.find('statefulBtn2');
$A.util.addClass(cmpTarget, "slds-is-pressed");
var cmpTarget = component.find('statefulBtn1');
$A.util.removeClass(cmpTarget, "slds-is-pressed");
}
console.log(component.find('statefulBtn2').get('v.class'));
/*Returns slds-col slds-size_1-of-2
slds-small-size_1-of-2
slds-large-size_1-of-4
slds-m-vertical_xx-small
slds-button_neutral
slds-button slds-button_dual-stateful
slds-p-left_xx-small
slds-p-right_xxx-small
*/
},