Button on each item in drop down list

Question

I have a dropdown list and I want to have a button for each item in list. But when I click on button the focus on the button ( btn-add-list ) is gone, so the list is gone too.

My code:

<button class="btn-add-list><i class="material-icons">note_add</i></button>
 <ul id="dropdown-add-list">
    <li class="list-item">List 1
       <button (click)="addItemToList('list')">+</button>
     </li>

     <li >List 2
        <button (click)="addItemToList('list')">+</button>
     </li>
 </ul>

css:

.btn-add-list:focus ~ #dropdown-add-list{
  display: bloc;
}

#dropdown-add-list{
display:none;
position: relative:;
.....
}

Answer 1

You need to add stopPropagation() to your click event in order to stop click event to propagate to li (basically, when you click, only button will be clicked, not li ):

<li class="list-item">List 1
   <button (click)="addItemToList('list');$event.stopPropagation()">+</button>
 </li>

<li >List 2
    <button (click)="addItemToList('list');$event.stopPropagation()">+</button>
</li>

Read more about stopPropagation() here . Also, you closed your <button> tags with </span> tag instead of </button> .