Toggle Button with dropdown - bootstrap

Question

i have a button-group with font awesome icons and a dropdown on one of them as shown in the example below. I want to toggle the button status. But on mouseout the .active class get removed automatically. This seems to be associated with the focus-Event catching for all .btn-Classes in the bootstrap.js. It also happens for $().button("toggle").

How can I work around this?

A .btn-group-toggle does not work here in combination with the dropdown.

$('#tools button').on('click', function () {
if (this.id == 'select') {
  // FIXME: The active class gets removed immediatly somehow
  $('#pencil').removeClass('active');
  $('#select').addClass('active');
} else {
  $('#pencil').addClass('active');
  $('#select').removeClass('active');
}
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="btn-group-vertical d-flex" data-toggle="buttons role goup" id="tools">
          <button type="button" class="btn btn-outline-secondary dropdown-toggle" id="pencil" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-pencil-alt" aria-hidden="true"></i></button>
          <div class="dropdown-menu" aria-labelledby="pencil" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
            <p class="text-center">Stroke Width: <span id="pencilwidthtext">10</span></p>
            <input type="range" class="custom-range" id="pencilwidth" value="10" min="1">
          </div>
          <button type="button" class="btn btn-outline-secondary" id="select" aria-pressed="false"><i class="fas fa-mouse-pointer" aria-hidden="true"></i></button>
        </div>

Sorry if that was not clear. If I click on #select I want to toggle this button to be active afterwards. But the active class gets not set/removed on mouseout. — hno2
– hno2, Commented Jun 17, 2019 at 14:33
I am pretty sure that the bootstrap btn-group toggles the active state of it's buttons. Just remove the addClass, removeClass from your #select element and it works — Lapskaus
– Lapskaus, Commented Jun 17, 2019 at 14:49
i did not dive into the bootstrap doc and didnt look how the btn-group handles toggling of the active state thats why i comment rather than answer - you should do that probably. Change your if - else to : if (this.id != 'select') { $('#select').removeClass('active'); } and it will work — Lapskaus
– Lapskaus, Commented Jun 17, 2019 at 15:03

Mamun · Accepted Answer · 2019-06-17 16:10:14Z

1

You can try with Event.stopPropagation():

$('#tools button').on('click', function (e) {
  if (this.id == 'select') {
    $('#pencil').removeClass('active');
    $('#select').addClass('active');
    e.stopPropagation();
  } else {
    $('#pencil').addClass('active');
    $('#select').removeClass('active');
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group-vertical d-flex" data-toggle="buttons role goup" id="tools">
  <button type="button" class="btn btn-outline-secondary dropdown-toggle" id="pencil" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-pencil-alt" aria-hidden="true"></i></button>
  <div class="dropdown-menu" aria-labelledby="pencil" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
    <p class="text-center">Stroke Width: <span id="pencilwidthtext">10</span></p>
    <input type="range" class="custom-range" id="pencilwidth" value="10" min="1">
  </div>
  <button type="button" class="btn btn-outline-secondary" id="select" aria-pressed="false"><i class="fas fa-mouse-pointer" aria-hidden="true"></i></button>
</div>

edited Jun 17, 2019 at 16:10

answered Jun 17, 2019 at 14:23

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hno2 Over a year ago

The problem of active class gets removed immediately still exists.

Lapskaus Over a year ago

It does not, if you click on the #select button and then click on the pencil button again, both buttons are active at the same time.

hno2 Over a year ago

Thanks for your help @Mamun. I only tried event.removeEventListener() but this does not work here. I going to look up why.

Collectives™ on Stack Overflow

Toggle Button with dropdown - bootstrap

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related