Angular-material ng-click strange border highlight

Question

I have a problem with using AngularJS and Angular-Material.

Take a look at the following code:

<div flex="100">    <ul class="list-group">        <li class="list-group-item cursorPointer"          ng-repeat="item in array" ng-click="selectItem(item)">           {{item.name}}        </li>     </ul> </div> 

The li tag has a ng-click function attach to it that contains some business logic. The problem is that there appears a strange border when you click on it (similar to user-selection highlight) and I can't seem to figure out where is it coming from.

This seems to appear only when I have an ng-click directive on an element (same behavior on span element)

Versions used:

AngularJS - 1.4.1

Angular-Material - 0.9.4

Angular-Aria - 1.4.0

Angular-Animate - 1.4.1

Angular-UI-Boostrap - 0.9.0

Bootstrap - 3.2.0

JQuery - 2.1.4

Any ideas? See this plnkr for example: http://plnkr.co/edit/60u8Ur?p=preview

Answer 1

Your problem is the :focus, you can get around by doing something like this

 span:focus {     outline: none;     border: 0;  } 

So this is just for your span, you could get more specific on other items if you wanted to remove it elsewhere.