1

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

An example of the component

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 ?

  • 1
    .slds-not-selected is the default state of a stateful button, not sure why you are removing the slds-is-selected class – glls Aug 5 '17 at 18:22
  • @glls in case I choose to click another button , I need to remove the is-selected class from the earlier one. – Brav Aug 5 '17 at 19:22
2

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.

  • Getting error [btnCmp is not defined] – Brav Aug 5 '17 at 18:37
  • My mistake.. Typo.. But still no repsonse.. Nothing happens on buttonClick – Brav Aug 5 '17 at 18:47
  • Set breakpoints using your browser's developer tools and check the various data values. Or add console.log output to see the data in the console view. – Keith C Aug 5 '17 at 18:54
  • Yes thanks. Will check the logs .. Your logic makes total sense too.. Saved me from writing a lot of unnecessary code.. – Brav Aug 5 '17 at 18:57
  • Not working perfectly.. the slds-is-selected class gets added onclick but it does not appear immediately. I have to click once on the button and then click somewhere outside for the button to get highlighted blue. Do you know why this is happening ? – Brav Aug 6 '17 at 7:01
0

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)

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.