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

Putsch

Bootstrap has it for link item groups item, I wonder if angular-bootstrap doesn't apply the CSS to element that are clickable and list-group-item. Just a guess. – Stet

@gillesc The thing is, if I remove all of the angular-material scripts, that highlight disappears. So it has to be from angular-material but I can't figure it out from where exactly. – Putsch

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.

Subtype

It is not the focus. Check the plnkr I provided in the question and try it out. – Putsch

@RusPaul it is the focus, you just need to remove it from whatever elements you want, I just have the example of the a. If you are using chrome, open dev tools, go to the elements tag and inspect your li's (or whichever you have the ng-click on) and right click and force element state to :focus. – Subtype

@RusPaul which part are you refering to not working? – Subtype

That strange blue border still doesn't disappear. See screenshot: i.imgur.com/6hR3hbA.png – Putsch

@RusPaul updated the css, use outline: none; and border: 0; See here -plnkr.co/edit/V9n42JiMWmWrvvpHqdrO?p=preview . Target whatever you want, you could probably do a *:focus if you wanted, but it's not recommended to use *. – Subtype

I think it should be span { outline: none; border: 0; } – Woodsum

Answer 2

I faced the same issue with most of the elements.

In my case following CSS codes worked:

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

Poul

Answer 3

this may be easy :

add nofocus class to that elements,

and add css to that class on :focus

.nofocus:focus {
    outline: none;
}

Pinson