Tree loses selected node when it loses focus - is that intentional?

[vsajip]

I populate a tree, I click on a node and it shows up in orange and fires a tree-node-selected event - so far, so good. But if I then tab off the tree to some focusable widget outside the tree, the orange of the node disappears - why is that node no longer selected? Certainly there's no visual indication that it is, and hovering over it shows the child lines in green rather than orange.

[davep]

At first glance I can't see anything in the Tree code that specifically does this (as in, it ensures that such styles are removed when focus is lost), but neither can I see anything in there that attempts a "this is the selected node but we don't have focus" styling. Given that Tree is likely going to receive some more work this month, I'll raise an issue about this to go along with the others so it can be considered.

[davep]

See #1471

[nitzan-shaked]

fwiw, I do this:

#my-tree:focus > .tree--cursor {
    background: $secondary-lighten-1;
}
#my-tree > .tree--cursor {
    background: $secondary-lighten-1 50%;
    text-style: none;
}

and it works nicely.

[vsajip]

and it works nicely.

It didn't for me 😞 , even after removing the > in case the internal hierarchy changed. What version of Textual are you using? I'm using 0.9.1. Can you post screenshots of how it looks with your styling?

[nitzan-shaked]

I am using 0.8.2

It took a bit of effort to "obfuscate" the app as it is proprietary, so apologies for the way it looks, but here is a screen recording I made. At one point I press "/" to go to the search box, at which point the tree loses focus and the cursor changes as you can see. I then press "esc" to leave the search box and go back to the tree, and the cursor changes back.

foo.mov

[vsajip]

Thanks for taking the trouble to do that. It doesn't seem to work the same way in 0.9.1 😞 I tried your styling and nothing appeared to change in my app.

[nitzan-shaked]

@vsajip I misled you. Not on purpose though :) Apologies for forgetting to mention the obvious!

I also subclass Tree, and in my subclass I override render_label(), where I do something like:

        if node._line == self.cursor_line:
            label.stylize(self.get_component_rich_style("tree--cursor"))

Here's (a reduced version of) my render_label():

    def render_label(
        self,
        node: TreeNode[TreeNodeData],
        base_style: Style,
        style: Style,
    ) -> Text:
        node_data = node.data
        assert node_data is not None

        expand_collapse_label = Text(
            "" if not node.allow_expand
            else "▾ " if node.is_expanded
            else "▸ "
        )

        icon = node_data.icon

        label = node_data.label.copy()
        label.stylize(style)
        if node._line == self.cursor_line:
            label.stylize(self.get_component_rich_style("tree--cursor"))

        return expand_collapse_label + icon + Text(" ") + label

[vsajip]

Ah, right, that explains why it didn't work for me! Thanks for the additional explanation.