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

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. — GillesC, Jun 22 '15 at 14:09
@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. — Rus Paul, Jun 22 '15 at 14:12

ajmajmajma · Accepted Answer · 2015-06-22T14:38:08.830

85

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.

edited Jun 22 '15 at 14:38

answered Jun 22 '15 at 14:11

ajmajmajma

13,712
24
79
133

It is not the focus. Check the plnkr I provided in the question and try it out. – Rus Paul Jun 22 '15 at 14:13
@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. – ajmajmajma Jun 22 '15 at 14:16
@RusPaul which part are you refering to not working? – ajmajmajma Jun 22 '15 at 14:29
That strange blue border still doesn't disappear. See screenshot: http://i.imgur.com/6hR3hbA.png – Rus Paul Jun 22 '15 at 14:36
1

@RusPaul updated the css, use outline: none; and border: 0; See here -http://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 *. – ajmajmajma Jun 22 '15 at 14:39
I think it should be span { outline: none; border: 0; } – Rohit Luthra Apr 29 '17 at 12:13

score 21 · Answer 2 · answered Feb 13 '18 at 07:02

21

I faced the same issue with most of the elements.

In my case following CSS codes worked:

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

answered Feb 13 '18 at 07:02

Amit Thakur

311
3
5

bhv · Answer 3 · 2017-06-03T02:38:05.630

10

this may be easy :

add nofocus class to that elements,

and add css to that class on :focus

.nofocus:focus {
    outline: none;
}

edited Jun 03 '17 at 02:38

answered Mar 29 '17 at 04:52

bhv

5,188
3
35
44

Angular-material ng-click strange border highlight

3 Answers3