Clearing and Adding TabPanes Not Working

[driscollis]

The bug

Adding some initial TabPanes to a TabbedContent widget works fine. Clearing the panes and adding new ones works, but the new panes are "hidden" . You can see their titles, but the contents of the panes is not shown until you click on the title of the pane.

Code example:

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

class NewPane(TabPane):

    def compose(self) -> ComposeResult:
        tree: Tree[str] = Tree("Tables")
        tree.root.expand()
        table_names = ["Rock", "Paper", "Scissors"]
        for table_name in table_names:
            table = tree.root.add(table_name)
        yield tree

class ExampleApp(App):

    def compose(self) -> ComposeResult:
        yield Button("Update", id="update")
        with TabbedContent("Database", id="tabbed_ui"):
            with TabPane("Database Structure"):
                yield Label("No data loaded")
            with TabPane("Table Viewer"):
                yield Label("No data loaded")
            with TabPane("Execute SQL"):
                yield Label("No data loaded")


    async def on_button_pressed(self) -> None:
        tabbed_content = self.query_one("#tabbed_ui", TabbedContent)
        await tabbed_content.clear_panes()
        await tabbed_content.add_pane(NewPane("Database Structure", id="data"))
        tabbed_content.active = "data"

if __name__ == "__main__":
    app = ExampleApp()
    app.run()

Note that this occurs whether on_button_pressed() is async or not. The difference between the two is that when you have it async, the contents of the new pane will appear if you keep clicking the update button repeatedly. The first click will clear it and nothing will show until you click the tab. However, if you click the button a second time, the new pane's contents will appear.

If you click it a third time, the new panes contents will be hidden again until you click the tab itself or you click the button to refresh again.

Textual Diagnose Output

Textual Diagnostics

Versions

Name	Value
Textual	2.1.0
Rich	13.7.1

Python

Name	Value
Version	3.12.3
Implementation	CPython
Compiler	MSC v.1938 64 bit (AMD64)
Executable	C:\Users\wheifrd\AppData\Local\Programs\Python\Python312\python.exe

Operating System

Name	Value
System	Windows
Release	10
Version	10.0.19045

Terminal

Name	Value
Terminal Application	Windows Terminal
TERM	Not set
COLORTERM	Not set
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=146, height=40
legacy_windows	False
min_width	1
max_width	146
is_terminal	True
encoding	utf-8
max_height	40
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

Feel free to add screenshots and / or videos. These can be very helpful!

[github-actions]

We found the following entries in the FAQ which you may find helpful:

• Why doesn't the DataTable scroll programmatically?
• How can I select and copy text in a Textual app?
• How can I set a translucent app background?
• Why do some key combinations never make it to my app?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.