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.

Answer 2

this may be easy :

add nofocus class to that elements,

and add css to that class on :focus

.nofocus:focus {
    outline: none;
}

Answer 3

I faced the same issue with most of the elements.

In my case following CSS codes worked:

*:focus {
    outline: none !important;
    border: 0 !important;
}