TabbedContent message mixup if Tabs inside a TabPane

[davep]

I suspect there are a few issues here (or rather a few operations that might suffer from a similar problem) but I think this example perfectly illustrates the confusion that could arise. Consider the following code:

from textual import on
from textual.app import App, ComposeResult
from textual.widgets import TabbedContent, Tabs, TabPane, Button

class TabbedContentMessageStealingApp(App[None]):

    CSS = """
    TabbedContent, TabPane {
        height: 1fr;
        width: 1fr;
    }
    """

    def compose(self) -> ComposeResult:
        with TabbedContent():
            with TabPane("Test"):
                yield Button("Disable", id="disable")
                yield Tabs("One", "Two", "Three", id="test-tabs")

    @on(Button.Pressed, "#disable")
    def disable_test(self) -> None:
        self.query_one("#test-tabs", Tabs).disable("tab-1")

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

There is a Tabs within a TabPane within TabbedContent. There is a Button that, when pressed, will disable the first Tab of the Tabs that the developer has added. When pressed, you would expect the Tab with the title One to grey out and become unusable.

Instead what happens is every tab becomes disabled, as does the Button too:

This will, of course, be due to the message leaking up to the TabbedContent and its first tab getting disabled due to it having a similar ID.

Compare what happens with this code, where I give the TabPane an ID that avoids the clash.

from textual import on
from textual.app import App, ComposeResult
from textual.widgets import TabbedContent, Tabs, TabPane, Button

class TabbedContentMessageStealingApp(App[None]):

    CSS = """
    TabbedContent, TabPane {
        height: 1fr;
        width: 1fr;
    }
    """

    def compose(self) -> ComposeResult:
        with TabbedContent():
            with TabPane("Test", id="avoid-me"):
                yield Button("Disable", id="disable")
                yield Tabs("One", "Two", "Three", id="test-tabs")

    @on(Button.Pressed, "#disable")
    def disable_test(self) -> None:
        self.query_one("#test-tabs", Tabs).disable("tab-1")

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

It feels like something should be done to isolate the TabbedContent from any Tabs that might be in one or more of its panes.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.