How do you get a click event from a sub-component

[sirfuzzalot]

In the example below the goal is to know which CheckboxItem is clicked on by having its on_click handler called. In the log click events are being registered, but only on the TodoList component and the Placeholder components.

# app.py

from typing import List, Tuple

import rich
from rich.panel import Panel
from rich.table import Table

from textual import events
from textual.app import App
from textual.reactive import Reactive
from textual.widget import Widget
from textual.widgets import Placeholder


class CheckboxItem(Widget):

    def __init__(self, parent: Widget, *, value: bool, label: str) -> None:
        super().__init__()
        self._parent = parent
        self.value = value
        self.label = label

    def __rich_repr__(self) -> rich.repr.Result:
        yield "name", self.name
        yield "value", self.value
        yield "label", self.label

    def render(self) -> Table:
        grid = Table.grid(padding=2)
        grid.add_column()
        grid.add_column(justify="right")
        grid.add_row("☑️" if self.value else "🟦", self.label)
        return grid

    async def on_click(self, event: events.Click) -> None:
        # Update state in parent.
        # Trigger refresh
        pass


class TodoList(Widget, can_focus=True):

    def __init__(self, items: List[Tuple[bool, str]] = []) -> None:
        super().__init__()
        self.items = items

    def render(self) -> Panel:
        grid = Table.grid(padding=1)
        grid.add_column()
        for value, label in self.items:
            grid.add_row(CheckboxItem(self, value=value, label=label))
        return Panel(grid, border_style="green")


class Todo(App):
    async def on_mount(self, event: events.Mount) -> None:
        todos = [(True, "dream about cake"), (False, "bake cake"), (False, "eat cake")]
        await self.view.dock(TodoList(todos), edge="left", size=50)
        await self.view.dock(Placeholder(), Placeholder(), edge="top")


if __name__ == "__main__":
    Todo.run(title="Todo", log="textual.log")

colorama==0.4.4
commonmark==0.9.1
Pygments==2.9.0
rich==10.7.0
textual==0.1.9

Python 3.9
Ubuntu 20

[lllama]

These are just guesses but it looks like MouseEvents will bubble by default, so you could try defining a click handler on the parent and triggering a render there. A little inefficient perhaps but could work.

Or you could try setting your values to be Reactive Booleans. That could trigger a repaint when they're updated. But that's voodoo so I've really no idea if it will work.

[willmcgugan]

Sorry there is no docs yet, but you have got the basic idea.

It's not enough to add a widget to the output of a render method, it needs to be "mounted". A View class will do this for you, so your TodoList should extend from View. You can then dock your CheckboxItem in the TodoList.on_mount

From there you can can create a custom message (see messages.py for example) which you can emit from CheckboxItem and handle in TodoList.

Alternatively, your CheckboxItem need not be a Widget. It could be a renderable and you can attach an action to the label via Style.on. I got this one working, here's your sample with modifications:

from typing import List, Tuple

import rich
import rich.repr
from rich.panel import Panel
from rich.style import Style
from rich.table import Table

from textual import events
from textual.app import App
from textual.reactive import Reactive
from textual.widget import Widget
from textual.widgets import Placeholder


class CheckboxItem:
    def __init__(self, parent: Widget, *, value: bool, label: str) -> None:
        super().__init__()
        self._parent = parent
        self.value = value
        self.label = label

    def __rich_repr__(self) -> rich.repr.Result:
        yield "value", self.value
        yield "label", self.label

    def __rich__(self) -> Table:
        grid = Table.grid(padding=2)
        grid.add_column()
        grid.add_column(justify="right")
        grid.add_row(
            "☑️" if self.value else "🟦",
            self.label,
            style=Style.on(click=f"item_clicked({self.label!r})"),
        )
        return grid


class TodoList(Widget, can_focus=True):
    def __init__(self, items: List[Tuple[bool, str]] = []) -> None:
        super().__init__()
        self.items = items

    def render(self) -> Panel:
        grid = Table.grid(padding=1)
        grid.add_column()
        for value, label in self.items:
            grid.add_row(CheckboxItem(self, value=value, label=label))
        return Panel(grid, border_style="green")

    async def action_item_clicked(self, item: str) -> None:
        self.console.bell()
        self.log("checkbox item", item, "clicked")


class Todo(App):
    async def on_mount(self, event: events.Mount) -> None:
        todos = [(True, "dream about cake"), (False, "bake cake"), (False, "eat cake")]
        await self.view.dock(TodoList(todos), edge="left", size=50)
        await self.view.dock(Placeholder(), Placeholder(), edge="top")


if __name__ == "__main__":
    Todo.run(title="Todo", log="textual.log")

Thanks for being an early adopter!

[sirfuzzalot]

Thanks for the quick response!

The Style.on seems the most straight forward method. Below is a refactor using a DockView. I found a few potential issues with this pattern though.

• If on_mount is only called once how can additional CheckboxItems be added to the TodoList view after mount?
• Panel could not be passed to TodoList.dock, so the original border had to be left off. Is there somewhere else this styling is exposed?

# app.py

from typing import List, Dict, Union

import rich
import rich.repr
from rich.table import Table

from textual import events
from textual.app import App
from textual.widget import Widget
from textual.views import DockView
from textual.message import Message
from textual.widgets import Placeholder


class CheckboxValueChanged(Message):
    def __init__(self, sender: Widget):
        super().__init__(sender)
        self.bubble = True


class CheckboxItem(Widget):
    def __init__(self, *, id: int, value: bool, label: str) -> None:
        super().__init__()
        self.id = id
        self.value = value
        self.label = label

    def __rich_repr__(self) -> rich.repr.Result:
        yield "id", self.id
        yield "value", self.value
        yield "label", self.label

    def render(self) -> Table:
        grid = Table.grid(padding=2)
        grid.add_column()
        grid.add_column(justify="right")
        grid.add_row("☑️" if self.value else "🟦", self.label)
        return grid

    async def on_click(self, event: events.Click) -> None:
        await self.emit(CheckboxValueChanged(self))


class TodoList(DockView):
    def __init__(self, items: List[Dict[str, Union[int, bool, str]]] = []) -> None:
        super().__init__()
        self.items = items

    async def on_mount(self, event: events.Mount) -> None:
        for item in self.items:
            await self.dock(
                CheckboxItem(
                    id=item["id"],
                    value=item["value"],
                    label=item["label"]
                ),
                size=1
            )


class Todo(App):
    async def on_mount(self, event: events.Mount) -> None:
        self.todos = [
            {"id": 1, "value": True, "label": "dream about cake"},
            {"id": 2, "value": False, "label": "bake cake"},
            {"id": 3, "value": False, "label": "eat cake"},
        ]
        await self.view.dock(TodoList(self.todos), edge="left", size=50)
        await self.view.dock(Placeholder(), Placeholder(), edge="top")

    async def message_checkbox_value_changed(self, message: CheckboxValueChanged) -> None:
        target = message.sender
        for item in self.todos:
            if item["id"] == target.id:
                item["value"] = not target.value
                break
        target.value = not target.value
        target.refresh()


if __name__ == "__main__":
    Todo.run(title="Todo", log="textual.log")