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
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.