Populating a ListView via constructor vs via inherit and compose

[davep]

There seems to be a subtle difference in the working of a ListView if you create one by passing the ListItems to it, vs if you create a custom ListView by inheriting from it and using compose to populate it. Take the following example code, which places both approaches side-by-side:

from textual.app        import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets    import Header, Footer, ListView, ListItem, Label

class CustomListView( ListView ):

    def __init__( self, choices: list[ str ] ) -> None:
        super().__init__()
        self._choices = choices

    def compose( self ) -> ComposeResult:
        """Compose the child widgets."""
        for choice in self._choices:
            yield ListItem( Label( choice ) )

class ListViewMakerApp( App[ None ] ):

    CSS = """
    ListView {
        width: 1fr;
        height: 1fr;
        border: round red;
    }
    """

    OPTIONS = [ f"This is the nifty test option {n}" for n in range( 20 ) ]

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Horizontal(
            ListView(
                *[ ListItem( Label( option ) ) for option in self.OPTIONS ]
            ),
            CustomListView( self.OPTIONS )
        )
        yield Footer()

if __name__ == "__main__":
    ListViewMakerApp().run()

I feel the CustomListView would not be an unusual approach for people to take; perhaps wanting to make their own commonly-used selection list of simple values (or even very complex child values that they want easily handled). Side-by-side the ListViews look the same to start with:

Note that the non-inherited ListView is to the left and that, even though it doesn't have focus, the first item is highlighted. If you tab into it you can cursor around, etc, just fine. On the other hand notice that the right ListView (which is a CustomListView) has no obvious highlighted item and if you tab into it nothing gets highlighted.

Further to this, if you (via keyboard) focus the inherited (right hand) ListView and then attempt to cursor down, the following exception will be raised:

╭─────────────────────────────── Traceback (most recent call last) ────────────────────────────────╮
│ /Users/davep/develop/python/textual-sandbox/.venv/lib/python3.10/site-packages/textual/widgets/_ │
│ list_view.py:127 in action_cursor_down                                                           │
│                                                                                                  │
│   124 │   │   self.emit_no_wait(self.Selected(self, selected_child))                             │
│   125 │                                                                                          │
│   126 │   def action_cursor_down(self) -> None:                                                  │
│ ❱ 127 │   │   self.index += 1                                                                    │
│   128 │                                                                                          │
│   129 │   def action_cursor_up(self) -> None:                                                    │
│   130 │   │   self.index -= 1                                                                    │
│                                                                                                  │
│ ╭──────────────────────────── locals ─────────────────────────────╮                              │
│ │ self = CustomListView(pseudo_classes={'focus', 'focus-within'}) │                              │
│ ╰─────────────────────────────────────────────────────────────────╯                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
TypeError: unsupported operand type(s) for +=: 'NoneType' and 'int'

[davep]

The quickest of fixes, which I'd like to confirm with @darrenburns first, is this:

diff --git a/src/textual/widgets/_list_view.py b/src/textual/widgets/_list_view.py
index 062986cb..1ea7100d 100644
--- a/src/textual/widgets/_list_view.py
+++ b/src/textual/widgets/_list_view.py
@@ -52,6 +52,9 @@ class ListView(Vertical, can_focus=True, can_focus_children=False):
         super().__init__(*children, name=name, id=id, classes=classes)
         self.index = initial_index

+    def on_mount( self ) -> None:
+        self.index = self.index or 0
+
     @property
     def highlighted_child(self) -> ListItem | None:
         """ListItem | None: The currently highlighted ListItem,

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.