I have a page containing several fancytree instances making use of the table and ariagrid extension. Users are able to manipulate nodes in the tree with buttons. For example they can copy or delete selected nodes. Those updates are made via AJAX calls. After copying the node the tree is reloaded with $.ui.fancytree.getTree("#tree1").reload();. After deleting a node via AJAX, I simply use .remove().
I have found that after doing one of those functions, I can no longer use keyboard navigation on the tree where the update occurred. Looking at the errors in the console, it seems like tree has lost its place. It is either looking for a node that doesn't exist, or it can't find the parent.
I get error messages like:
After deletion
"Could not find related node '40'."
"Uncaught TypeError: anyNode is null"
After copying a node
"Fancytree assertion failed: Could not find FancytreeNode@00001457[title='myfile.jpg'] in parent's children: FancytreeNode@root_2[title='root']"
"Uncaught Error: Fancytree assertion failed: Could not find FancytreeNode@00001457[title='myfile.jpg'] in parent's children: FancytreeNode@root_2[title='root']"
In these cases myfile.jpg is the file I either copied or deleted.
I thought that perhaps it had to do with the node key potentially being different on reload, but I assigned a key in my source data and I still have the same issue.
I also thought that perhaps there were lingering active nodes causing confusion so I tried clearing the focus and active status of all nodes in the tree, but neither worked.
If I click a node in the table with my mouse, thereby activating it, I can once again tab as normal. However, I am trying to address a need for keyboard only navigation.
This is a rather complicated script so replicating it in jsfiddle has been a challenge and my code is not available publicly. Has anyone experienced something similar? I feel the tree is caching something that I need to clear.
UPDATE: I have found that if I modify the table extension by removing the comments around lines 539-543, that when I tab to the table, if I then use the left cursor (I assume activating row mode), I can enter the table and tab as normal.
The lines I removed the comments from are below (I left the alert commented):
treeSetFocus: function(ctx, flag) {
// alert("treeSetFocus" + ctx.tree.$container);
ctx.tree.$container.focus();
$.ui.fancytree.focusTree = ctx.tree;
