Question

Consider this example showing the YUI tree in action:

http://developer.yahoo.com/yui/examples/treeview/tv_edit.html

1. Select the title in orange (“TreeView Control: Inline Editing of TreeView Node Labels”).
2. Hit tab a first time: the link “View example in new window” is selected.

3. Hit tab a second time: this selects an anchor inside the tree.

   Label 0 not highlighted http://img.skitch.com/20091218-61eqs6gcngp8ay56s1pba3jhb.png

4. From there you can use the up/down keys to navigate through the tree. The current item is always highlighted with a background color.

   Label 1 is highlighted http://img.skitch.com/20091218-es5xh4g4k41d8s133hay65ufrr.png

The issue is that the background of the current item is not highlighted on step 3 above (but it is when navigating through the tree on step 4). Is this a bug of the YUI tree, or is there a way to programmatically highlight the current item when the tree receives the focus?

Answer 1

A “fix” for this is to register a listener on anchors inside the node, when an anchor gets the focus to find the corresponding node, and call node.focus(). Adding the following to render() in treeview.js does the trick:

var anchors = this.getEl().getElementsByTagName("a");
for (var anchorIndex = 0; anchorIndex < anchors.length; anchorIndex++) {
    var anchor = anchors[anchorIndex];
    Event.on(
        anchor,
        'focus',
        function (ev) {
            var target = Event.getTarget(ev);
            var node = this.getNodeByElement(target);
            node.focus();
        },
        this,
        true
    );
}