jsTree: tabbing out of edit mode?

Question

I'm using the jsTree plugin in my current Angular 2 project. All is working well, but I'm now trying to add specific behavior: When the user is editing a node and he presses the tab key, I want to automatically add a new empty sibling node directly underneath the node he was editing, and enable edit mode on it so that he can continue typing and effectively use the tab key as a keyboard shortcut to quickly create large numbers of nodes on the same level.

I've tried adding a keyup event listener to the high level div containing jsTree:

(keyup)="onKeyUp($event)"

The onKeyUp function:

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

Finally, the (simplified) code for the jsTree edit:

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

This doesn't work out as intended. When debugging, I can see that every key is captured when the user is renaming a node, but the 'tab' keypress seems to be suppressed by jsTree somehow. The onKeyUp function is not triggered, instead the default jsTree behavior proceeds, renaming the node and selecting it. I have also looked into the different jsTree.edit callback function parameters (nodeObject, status, cancelled) but none of those seem to be useful in my case.

This is not too high on my priority last, it's more a nice-to-have, but I am genuinely curious how I could implement this.. Does anyone have any ideas?

Do you have an idea how to add jstree to angular-cli project? Do you have a git with an example of what you doing with jstree???? Please. — hackp0int, Jul 06 '17 at 18:13

score 1 · Accepted Answer · answered Feb 17 '17 at 14:52

You will have to monitor tab key on the input that pops up when you start editing a node, as below. Also check out demo - 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);
   }

})

Thanks a lot for the detailed answer and fiddle, that makes sense! — Jort, Feb 17 '17 at 16:07

jsTree: tabbing out of edit mode?

1 Answers1