Not able to toggle a button to slds-is-selected onClick

Question

I have a lightning component which asks a series of question and provides answer by Scale. I choose the scale to be displayed as button group and get the scale value when clicked. I am trying to toggle the slds-is-selected on the button class but it won't work properly. Below for reference

Component

<aura:component>

  <div aura:id="questionBox" class="slds-hide">

             <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">

            <thead>
               <tr class="slds-text-title--caps" style="background-color: gainsboro;">
                  <th scope="col" style="width: 50%;">
                    <div class="slds-truncate" title="Client Value Potential" style="font-weight: bold;">Fox Evaluator</div>
                  </th>
                  <th scope="col" colspan="4" style="text-align: center;width: 45%;">
                    <div class="slds-truncate" title="Option Name" style="font-weight: bold;">Scale</div>
                  </th>
                </tr>
            </thead>
             <tbody>

              <tr>
                <th scope="row" data-label="something">
                  <div class="slds-truncate" title="Account"><a href="javascript:void(0);">
                    <ui:outputText value="{!v.firstName}"/>
                    has helped shape the Organization's business direction, key initiatives, philosophy and culture.</a></div>                 
                </th>
                 <td data-label="Option Name" style="text-align: center;">  
                  <div style="display: inline-block;width: 45%;">

                     <div id="Q1" class="slds-button-group" role="group">
                        <lightning:button aura:id="Q1btn" class="slds-button slds-button_icon slds-button_icon-border" 
                         title="Dont know yet." label="?" onclick="{!c.buttonScore}" />
                        <lightning:button aura:id="Q2btn" class="slds-button slds-button_icon slds-button_icon-border" label="-1" 
                         title="Little awareness and involvement" value="-1" onclick="{!c.buttonScore}" />
                        <lightning:button aura:id="Q3btn" class="slds-button slds-button_icon slds-button_icon-border" label="0" 
                         title="Some organizational awareness" value="0" onclick="{!c.buttonScore}"/>
                        <lightning:button aura:id="Q4btn" class="slds-button slds-button_icon slds-button_icon-border" label="1"
                         title="Limited involvement" value="1" onclick="{!c.buttonScore}" />
                        <lightning:button aura:id="Q5btn" class="slds-button slds-button_icon slds-button_icon-border" label="2"
                         title="Strong involvement" value="2" onclick="{!c.buttonScore}"/>
                    </div>

                 </div>
                 </td>
              </tr>

  </aura: component>

Controller

   buttonScore : function(component,event,helper){
      var btnClicked = event.getSource();
      var btnId = btnClicked.getLocalId();
      if(btnId == "Q1btn"){
        var Q1 = component.find("Q1btn");
        $A.util.addClass(Q1,"slds-is-selected");

       var Q2 = component.find("Q2btn");
       var Q3 = component.find("Q3btn");
       var Q4 = component.find("Q4btn");
       var Q5 = component.find("Q5btn");

       $A.util.removeClass(Q2,"slds-is-selected");
       $A.util.removeClass(Q3,"slds-is-selected");
       $A.util.removeClass(Q4,"slds-is-selected");
       $A.util.removeClass(Q5,"slds-is-selected");

  }

}

The button scale won't highlight in a single click. I have to click twice to make it toggle. Is this the right approach ? What is another way ?

Answer 1

I would code that logic like this:

  buttonScore : function(component, event, helper) {

      var btnClicked = event.getSource();
      var btnClickedId = btnClicked.getLocalId();

      var btnIds = ["Q1btn", "Q2btn", "Q3btn", "Q4btn", "Q5btn"];

      for (var i = 0; i < btnIds.length; i++) {

          var btnId = btnIds[i];
          var btnCmp = component.find(btnId);

          if (btnId === btnClickedId) $A.util.addClass(btnCmp, "slds-is-selected");
          else $A.util.removeClass(btnCmp, "slds-is-selected");
      }
  }

Note this is untested so may have typos or just be plain wrong.

PS

One thing to try to get this to work (see comment thread) is to defer the execution of this logic until after the the current JavaScript event loop (and so after the default logic in the lightning:buttons):

  buttonScore : function(component, event, helper) {

      var btnClicked = event.getSource();
      var btnClickedId = btnClicked.getLocalId();

      var btnIds = ["Q1btn", "Q2btn", "Q3btn", "Q4btn", "Q5btn"];

      window.setTimeout(function() {
          for (var i = 0; i < btnIds.length; i++) {

              var btnId = btnIds[i];
              var btnCmp = component.find(btnId);

              if (btnId === btnClickedId) $A.util.addClass(btnCmp, "slds-is-selected");
              else $A.util.removeClass(btnCmp, "slds-is-selected");
          }
      }, 0);
  }

But that seems hacky. Or a simpler solution might be to just use plain HTML buttons instead of the Lightning ones: you can still give plain HTML elements aura:id values.

Answer 2

I would suggest you add some CSS to your component to better control the behavior, rather than depend on the SLDS to provide the one you are expecting.

in the Styles, for example, add:

.THIS .slds-mycustom-selection{
    background-color: red;
}

and in your controller, use

$A.util.addClass('Component','slds-mycustom-selection') and 
$A.util.removeClass('Component','slds-mycustom-selection') 

as you were/are doing. and use your custom classes instead. Looks like the SLDS isn't responding properly (maybe a bug)