Comment activer la navigation par tabulation vers la cellule modifiable suivante dans un groupe de lignes différent?

Question

Je suis en train de créer une application en utilisant la version 4.0.7 de l'entreprise aggrille, qui utilise des groupes de lignes et des champs modifiables, la navigation au clavier entre les cellules éditables est essentielle.

La navigation par onglets intégrée fonctionne bien, mais uniquement dans un groupe de lignes. Une fois la dernière cellule modifiable d'un groupe atteinte, appuyer sur la touche tab ne passe pas à la cellule modifiable suivante du groupe suivant, mais plutôt à un élément non apparenté de la page.

Voici un exemple basé sur un échantillon de documentation réseau ag, les noms des athlètes sont modifiables, onglet accède à l'athlète suivant, mais seulement dans un pays: https://jsfiddle.net/pfhkf3bm/

field: "athlete", 
editable: true 

Est-ce le comportement prévu? Quel est le moyen le plus propre d'étendre la navigation par tabulation pour passer à l'élément modifiable suivant dans un autre groupe?

Merci!

Answer 1

Cette méthode a fonctionné pour moi:

myTabToNextCell(params) { 
    const previousCell = params.previousCellDef; 
    const lastRowIndex = previousCell.rowIndex; 
    let nextRowIndex = lastRowIndex + 1; 
    // TODO renderedRowCount must contain the row count. 
    const renderedRowCount = this.state.rowCount; 

    // if (nextRowIndex >= renderedRowCount) { nextRowIndex = 0; } 
    if (nextRowIndex < renderedRowCount) { nextRowIndex = lastRowIndex + 1; }  else { 
     nextRowIndex = 0; 
    } 

    const result = { 
     rowIndex: nextRowIndex, 
     column: previousCell.column, 
     floating: previousCell.floating 
    }; 

    return result; 
}