Как сосуществовать выпадающие списки primeng и выпадающие начальной загрузки 4 на одной странице?

Question

У меня есть пара раскрывающихся списков с primeng и bootstrap 4, возможно сосуществование вместе, прямо сейчас невозможно закрыть, если я сначала открою раскрывающийся список primeng, а затем попробую открыть раскрывающийся список начальной загрузки, раскрывающийся список primeng все еще открыт, только закрыть если щелкнуть другой раскрывающийся список.

Это мой пример:

<p-dropdown [options]="customProducts">
   <ng-template let-item pTemplate="item">
   {{ item.value.name }}
   </ng-template>
</p-dropdown>

<br>
<br>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown button
  </button>
 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
   <a class="dropdown-item" href="#">Action</a>
   <a class="dropdown-item" href="#">Another action</a>
   <a class="dropdown-item" href="#">Something else here</a>
</div>

http://plnkr.co/edit/HFLpC7FyE8Z8tSxH4Ipk?p=preview