web-dev-qa-db-fra.com

Surlignage de bordure étrange en matériau angulaire ng-click

J'ai un problème avec AngularJS et Angular-Material.

Jetez un œil au code suivant:

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

La balise li possède une fonction ng-click qui contient une logique métier. Le problème est qu'il apparaît une bordure étrange lorsque vous cliquez dessus (similaire à la mise en évidence de la sélection de l'utilisateur) et je n'arrive pas à comprendre d'où cela vient.

Cela semble apparaître uniquement lorsque j'ai une directive ng-click sur un élément (même comportement sur l'élément span)

Versions utilisées:

AngularJS - 1.4.1

Matériau angulaire - 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

Des idées? Voir ce plnkr par exemple: http://plnkr.co/edit/60u8Ur?p=preview

cssangularjsangularjs-ng-clickangular-material
30
Rus Paul

Votre problème est le suivant: concentrez-vous, vous pouvez vous déplacer en faisant quelque chose comme ça

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

Donc, c'est juste pour votre durée, vous pourriez être plus précis sur d'autres éléments si vous vouliez le supprimer ailleurs.

66
ajmajmajma

J'ai rencontré le même problème avec la plupart des éléments.

Dans mon cas, les codes CSS suivants ont fonctionné:

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

cela peut être facile:

ajoutez la classe nofocus à ces éléments,

et ajoutez css à cette classe sur :focus

.nofocus:focus {
    outline: none;
}
8
bhv