jsTree：編集モードのタブ移動？

Question

現在のAngular 2プロジェクトでjsTreeプラグインを使用しています。 ユーザーがノードを編集しているときにTabキーを押すと、編集中のノードのすぐ下に新しい空の兄弟ノードが自動的に追加されますが、その上で編集モードを有効にして、入力を続けてキーボードショートカットとしてTabキーを効果的に使用して、同じレベルで多数のノードを素早く作成することができます。

IはjsTreeを含む高レベルのDIVにkeyUpイベントのイベントリスナーを追加しようとした：

(keyup)="onKeyUp($event)" 

onKeyUpを機能：jsTree編集用

onKeyUp(e: any) { 
    if (e.code === 'Tab' && this.renamingNode) { 
     // pressed tab while renaming subitem, insert new sibling item and start editing 
    } 
} 

最後に、（簡略化）コード：

let scope = this; 
$(this.currentTree).jstree().create_node(selectedItem, { 'text': '', 'type': 'value' }, 'last', function callback(e: any) { 
    scope.renamingNode = true; 
    // enable renaming of node 
    $(scope.currentTree).jstree().edit(e, null, function callback(addedNode: any, status: boolean, cancelled: boolean) { 
     scope.renamingNode = false; 
     // code to add addedNode to database using service 
    } 
} 

これは意図したとおりには機能しません。デバッグすると、ユーザーがノードの名前を変更するときにすべてのキーがキャプチャされることがわかりますが、「Tab」キーの押下は何とかjsTreeによって抑制されているようです。 onKeyUp関数はトリガされず、デフォルトのjsTreeビヘイビアが実行され、ノードの名前を変更してノードを選択します。 私は、別のjsTree.editコールバック関数のパラメータ（nodeObject、status、cancelled）も調べましたが、私の場合はそれらのどれも役に立つとは思われません。

これは私の優先事項ではあまり高くありませんが、これはより良いものですが、私はこれをどのように実装することができるのか本当に興味があります..誰にもアイデアはありますか？

Answer 1

以下のように、ノードの編集を開始するときにポップアップする入力のタブキーを監視する必要があります。デモもチェックしてください - Fiddle Demo

$(document).on('keydown', '.jstree-rename-input', function(e){ 

    if (e.keyCode == '9') { 
    var focusedNodeId = $('#jstree').jstree()._data.core.focused, 
      focusedNode = $('#jstree').jstree().get_node('#'+focusedNodeId); 
     newNode = $("#jstree").jstree('create_node', '#'+focusedNodeId); 

     // simulate timeout to ensure new node is in the DOM and is visible 
     // before we start editing it 
     setTimeout(function(){ 
      $("#jstree").jstree('edit', newNode); 
     }, 0); 
    } 

})