Bug: Custom compound widget not being rendered inside TabPane

[coffeegist]

When writing a recent application, I wanted to use the TabbedContent widget with TabPanes to keep things a little bit more clear for the user. I had already created a custom widget for what would be the TabPane content, so instead of yielding the custom widgets directly, I yielded them from within a TabPane context block. However, when doing this, the TabPane is blank. I then copied the contents of the compose method of my custom widget and pasted it inside the TabPane context block (where I previously yielded my custom widget) and everything works as expected.

from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical, ScrollableContainer
from textual.widgets import Header, Footer, Static, ContentSwitcher, ListItem, \
    TabbedContent, TabPane, Input, Label, Button
from textual.widget import Widget
from textual.pilot import Pilot

class SettingsWidget(Widget):

    def __init__(self) -> None:
        super().__init__()

    def compose(self):
        yield Input(placeholder="Name")
        yield Label("Input File")
        yield Button("Browse")
        yield Input(placeholder="Exclude File")
        yield Input(placeholder="Setting 1")
        yield Input(placeholder="Setting 2")
        yield Input(placeholder="Setting 3")
        yield Input(placeholder="Setting 4", password=True)
        yield Input(placeholder="Setting 5")
        yield Input(placeholder="Setting 6", password=True)

class MyApp(App):

    TITLE = "My App"
    BINDINGS = [("d", "toggle_dark", "Toggle dark mode")]


    def compose(self) -> ComposeResult:
        with Header() as header:
            header.tall = True

        with TabbedContent(initial="settings"):
            with TabPane("Settings", id="settings"):
                yield SettingsWidget()
            with TabPane("Other", id="other"):
                yield Input(placeholder="Name")
                yield Label("Input File")
                yield Button("Browse")
                yield Input(placeholder="Exclude File")
                yield Input(placeholder="Setting 1")
                yield Input(placeholder="Setting 2")
                yield Input(placeholder="Setting 3")
                yield Input(placeholder="Setting 4", password=True)
                yield Input(placeholder="Setting 5")
                yield Input(placeholder="Setting 6", password=True)

        yield Footer()

    def action_toggle_dark(self) -> None:
        self.dark = not self.dark

def main() -> None:
    app = MyApp()
    app.run()

if __name__ == "__main__":
    main()

python 3.11.4
poetry 0.30.0

[github-actions]

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

• Does Textual support images?
• How do I center a widget in a screen?
• 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

[coffeegist]

As always, 2 minutes later I discover a solution. Using the Static widget as my parent class seems to fix it. This wasn't clear in the documentation if it's expected (https://textual.textualize.io/guide/widgets/#compound-widgets).

[TomJGooding]

If I remember correctly, you might need to set the height/width to something like auto on a custom widget inherited from Widget.

[davep]

Would you mind trying the workaround mentioned in #2411 and letting us know if it works for you?

[coffeegist]

@davep that fix didn't seem to help. Setting to auto also didn't seem to have any effect

[coffeegist]

I also tried switching to a grid, was having issues there as well so I just backed down to the example located at https://textual.textualize.io/guide/layout/#grid, and it looks nothing like the expected output. Including a better textual diagnose below

Textual Diagnostics

Versions

Name	Value
Textual	0.30.0
Rich	13.4.2

Python

Name	Value
Version	3.11.4
Implementation	CPython
Compiler	Clang 14.0.3 (clang-1403.0.22.14.1)
Executable	/Users/user/Development/github.com/.venv/bin/python

Operating System

Name	Value
System	Darwin
Release	22.4.0
Version	Darwin Kernel Version 22.4.0: Mon Mar 6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64

Terminal

Name	Value
Terminal Application	vscode (1.79.2)
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

[davep]

@coffeegist Thanks. Now that I'm back at a keyboard I've done a quick test with your code. If you add this to your SettingsWidget:

    DEFAULT_CSS = """
    SettingsWidget {
        height: auto;
    }
    """

everything works fine. The issue is you're creating SettingsWidget from Widget (which is fine), but it doesn't know how tall it is, and so in turn the container can't know how much space to make, etc.

Setting it to height: auto tells it "make me tall enough to hold all the widgets inside me".

[coffeegist]

Thanks for the reply and clarification @davep!

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[davep]

Most welcome. Glad it helped.