Prevent dropdown from closing if click is happening inside the dropdown menu

Question

I am using bootstrap with angular and using the dropdown module of bootstrap. I am trying to keep the dropdown menu open if click happens on the inside.

I was able to achieve this using event.stopPropagation() . However, if I have 2 dropdowns and I do the following, this doesn't work:

Scenario1: (Correct Behavior)

1) Open Dropdown 1
2) Click anywhere inside the dropdown menu, it works perfectly and the menu does not close.
3) Click outside. Menu Closes. Correct behavior.

Scenario1: (Unexpected Behavior)

1) Open Dropdown1
2) Open Dropdown2

In this scenario, dropdown1 menu should have closed the moment I clicked on dropdown2. But this is not happening.

Here is my code:

<div class="container">
  <div  (click)="openDropdown($event)">
    <div class="btn-group" dropdown>
      <div  dropdownToggle id="pencilColorPicker">
          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> 
      </div>

      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-basic">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>      
      </ul>
    </div>
  </div>

  <div  (click)="openDropdown($event)">
    <div class="btn-group" dropdown>
      <div  dropdownToggle id="pencilColorPicker">
          <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> 
      </div>

      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
          role="menu" aria-labelledby="button-basic">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>      
      </ul>
    </div>
  </div>

</div>

Here is my openDropdown method:

  openDropdown(e){
    e.stopPropagation();
  }

Here is the Stackblitz link: Stackblitz

My question is how can I keep the dropdown menu open if click is happening inside of an opened dropdown but close it if click happens anywhere outside. In my case, if outside click happens to be another dropdown, the earlier opened dropdown menu does not close.

Answer 1

I updated your HTML file (see below) so that the event.stopPropagation() method is called directly once the user clicks on the dropdown. Seems to be working, I found the answer here: How to prevent an angular-bootstrap dropdown from closing (Unbind Event which was bound by a directive)

The openDropdown() method can be removed from the ts file. Hope this helps!

 <div class="container"> <div> <div class="btn-group" dropdown> <div dropdownToggle id="pencilColorPicker"> <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> </div> <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> </ul> </div> </div> <div> <div class="btn-group" dropdown> <div dropdownToggle id="pencilColorPicker"> <img class="icon" src="https://www.burns-360.com/wp-content/uploads/2018/09/Sample-Icon.png"> </div> <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()" role="menu" aria-labelledby="button-basic"> <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> </ul> </div> </div> </div>