TabbedContent: Content of the previous TabPane not completely cleared

[liancheng]

Reproduction:

from textual.app import App, ComposeResult
from textual.widgets import Label, TabbedContent, TabPane


class TabApp(App):
    def compose(self) -> ComposeResult:
        with TabbedContent():
            with TabPane('Tab 1', id='tab-1'):
                yield Label('hello')
                yield Label('hello')
                yield Label('hello')
            with TabPane('Tab 2', id='tab-2'):
                yield Label('world')


if __name__ == '__main__':
    app = TabApp()
    app.run()

From the video below, you can see that the 3rd Label in Tab 1 is not cleared after switching between two tabs repeatedly.:

Screen.Recording.2023-03-23.at.09.22.12.mov

[davep]

Good spot; looks to be down to default styling, most likely. You can work around it right now by giving your TabbedContent a wee bit of styling. For example if I add this:

    TabbedContent {
        height: 1fr;
    }

the problem goes away.

[liancheng]

Thanks for the great work and the quick triage as always, @davep!

One comment about widget examples: after adding a new widget, maybe we should build more sophisticated example apps to reflect how users may typically use it in real-world.

Some existing examples were too "minimal" and not very helpful for building real-world apps. One instance is the Tabs example and issue #2044. The current example initializes a Tabs widget using Text instead of Tab. In practice, you probably want to use Tabs instead of Texts so that you can assign CSS IDs to individual tabs. In that case, we would detect #2044 easily as well.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.