My table updates every few seconds and each row has a dropdown menu that allows users to take actions on that row.
However, the problem is that when new data is received from the database, the dropdown menu closes if it was open. This can be frustrating for users.
Initially, I had separate buttons for each action on the row, but I anticipate that the list of actions will grow, so I decided to switch to using a dropdown menu.
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<div class="btn-group" dropdown>
<button type="button" class="btn btn-sm btn-primary">Action</button>
<button type="button" class="btn btn-sm btn-primary" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Edit</a>
</li>
<li><a href="#">Delete</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
I created a Plunker to demonstrate this here. It's probably easier to see than for me to explain! If you open a dropdown and wait a few seconds, you'll notice it disappears.
I would greatly appreciate any advice on this issue.
Edit: I want to thank Denocle for his helpful answer here
Also, I've made some refinements to his method without utilizing IDs in the DOM, found here
Thanks for the assistance and feedback.