Le tabindex par rang perdu a perdu le focus après quelques onglets continus

Question

J'ai une grille d'ui avec seulement 1 colonne et environ 1000 rangées. Chaque ligne contient une zone de texte. Je veux naviguer dans la zone de texte par onglet. Cela fonctionne bien sur 10 - 15 lignes, après que la zone de texte est en train de perdre son focus, puis si vous appuyez de nouveau sur tabulation, il passera les lignes suivantes et passera à une autre zone de texte.

Voir la question plnkr here

UI Options-Grid:

$scope.gridOptions = { 
    rowHeight: '200', 
    enableColumnMenus: false, 
    paginationPageSize: 2000, 
    columnDefs: [ 
     {name:"value", width:'*', 
     cellTemplate: gridTemplate, 
     } 
    ], 
    data: gridData 
}; 

Answer 1

Pourquoi ce comportement Happens:

ui.grid a son propre module ui.grid.infiniteScroll mais par défaut, il ne rend pas tous vos 1000 articles en raison de la pénalité de performance.

Si vous inspectez la structure DOM de la table, vous constaterez que ui.grid ne restitue que 15 éléments et l'efface lors du défilement (défilement déroulant également sur l'onglet click). C'est une raison pour laquelle les 15 premiers articles fonctionnent correctement en mettant l'accent sur l'onglet.

Lorsque vous atteignez l'index 16, ui.gridréengendrer 15 articles avec de nouveaux index et donc vous perdez la mise au point.

Je vous ai vu ouvert aussi ce numéro sur github/issues et je crois que son bug ui.grid en plus de 1479 autres :). De l'histoire ui.grid a environ 200 questions liées à la mise au point et il semble que leurs développeurs ne se dépêchent pas de les corriger car c'est trop compliqué et peut entraîner une régression. Donc, ma conclusion est juste de vivre avec ou d'utiliser la structure de pagination.

Answer 2

Tout ce que @Maxim a mentionné est absolument vrai. Pour résoudre ce problème, , vous pouvez définir une solution virtuelle: virtualThreshold = 50 et ensuite utiliser la pagination pour ne pas perdre le focus.

Answer 3

Vous pouvez contourner le problème en attrapant l'événement de touche TAB et remplacer le comportement par défaut. Chaque zone de texte écoutera l'événement key-press, en passant le focus à la zone de texte suivante

Il s'agit de an example qui peut aider Cependant, 1000 entrées ressemblent à un mauvais UX et auront probablement de mauvaises performances.