Angular -material ng-click странная подсветка границы

У меня проблема с использованием AngularJS и Angular -Material.

Взгляните на следующий код:

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

В теге li добавлена функция ng-click, которая содержит некоторую бизнес-логику. Проблема в том, что при нажатии на нее появляется странная рамка (похожая на выделение выбора пользователем), и я не могу понять, откуда она взяла.

Кажется, это появляется только тогда, когда у меня есть директива ng-click для элемента (такое же поведение на элементе span)

Используемые версии:

AngularJS - 1.4.1

Angular -Материал - 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

Любые идеи? См. Этот plnkr, например: http://plnkr.co/edit/60u8Ur?p=preview

Ответ 1

Ваша проблема: фокус, вы можете обойти, сделав что-то вроде этого

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

Итак, это просто для вашего диапазона, вы можете получить более конкретную информацию о других элементах, если хотите удалить его в другом месте.

Ответ 2

это может быть легко:

добавьте nofocus класс к этим элементам,

и добавьте css в этот класс на :focus

.nofocus:focus {
    outline: none;
}