Set highlighted item in ListView

[derVedro]

Hey, I’m struggling to highlight an element when repopulating a ListView with new items. Can someone help me out? The usual thing any clanker suggests is setting the index. That kinda works, the element gets selected, but there’s no visible highlighting.

I try to make a nested menu out of ListView, there the visiting status is preserved.

Here is minimal example…

from textual.app import App
from textual.widgets import ListView, ListItem, Label

data = {
"White Rabbit": {"Lory": {"Eaglet": None}, "Mouse": {"Dodo": None}},
"Duck": {"Bill the Lizard" : None, "Pat": {"Caterpillar": None, "Pigeon": None}},
"Duchess": {"Cook": {"Cheshire Cat": None, "March Hare": None, "Hatter": None}},
"Dormouse": { "Frog-Footman": None, "Fish-Footman": None},
"Mock Turtle": {"King of Hearts": None, "Queen of Hearts": None, "Knave of Hearts": None}
}

class Item(ListItem):
    def __init__(self, key):
        super().__init__(Label(key))
        self.key = key


class Menu(ListView):
    def __init__(self, menu_data, path=[]):
        super().__init__()
        self.data = menu_data
        self.path = path
        self.history = []
    
    def on_mount(self):
        for key in self.data:
            self.append(Item(key))
    
    def on_list_view_selected(self, e):
        key = e.item.key
        if self.data[key]:
            self.history.append((self.data, self.path))
            self.clear()
            self.data = self.data[key]
            self.path = self.path + [key]
            for k in self.data:
                self.append(Item(k))
            self.index = 0
    
    def on_key(self, e):
        if e.key == "backspace" and self.history:
            self.clear()
            self.data, self.path = self.history.pop()
            for k in self.data:
                self.append(Item(k))
            self.index = 0            


class MyApp(App):
    def compose(self):
        yield Menu(data)


MyApp().run()

[cookesan]

index is the right API, but in this example it is being set while the ListView is still being cleared/repopulated.

clear() and mounting new items are awaitable operations, so set the index after the new children are actually in the DOM:

async def set_items(self, menu_data, path):
    await self.clear()
    self.data = menu_data
    self.path = path
    await self.extend([Item(key) for key in self.data])
    self.index = 0
    self.focus()

Then call that helper from the selected/backspace paths. self.focus() is only needed if you expect the focused highlight colors; ListView has a separate blurred highlight style when it is not focused.

[derVedro]

Thanks for the tip. I guess I have to AwaitComplete(self.set_items(...)) in on_key / on_list_view_selected or isn't that the proper way to do that?

[cookesan]

No, I would not explicitly construct AwaitComplete in the handler. In the version I sketched, set_items is an async helper, so the call site should just be an async handler and await self.set_items(...):

async def on_key(self, event: events.Key) -> None:
    if event.key == "backspace":
        await self.set_items(menu_data, path)

async def on_list_view_selected(self, event: ListView.Selected) -> None:
    await self.set_items(next_menu_data, next_path)

AwaitComplete is mainly for APIs that return an optionally-awaitable object; Textual's docs say you are unlikely to need to create it yourself. Textual also awaits async message handlers. Docs: https://textual.textualize.io/api/await_complete/ and https://textual.textualize.io/guide/events/#async-handlers

If you later choose to expose set_items as a non-async method, put the coroutine inside it and return AwaitComplete(update()) from that method. That is the implementation side; the event-handler call site should still just await self.set_items(...).

[derVedro]

Thanks, that helped me understand it better.