Visible widgets inside an invisible container are not part of the focus chain

[davep]

Textual supports visible children of an invisible container -- this can be helpful with some approaches to laying things out. However, it seems that the visible children of the invisible container aren't seen as part of the focus chain; they can't be tabbed to with the keyboard.

Example code:

from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets import Button, Label

class InvisibleContainerFocusApp(App[None]):

    CSS = """
    #invisible {
        visibility: hidden;
    }

    #invisible > * {
        visibility: visible;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            with Vertical():
                yield Label("The container for this is visible")
                for _ in range(10):
                    yield Button()
            with Vertical(id="invisible"):
                yield Label("The container for this is invisible")
                for _ in range(10):
                    yield Button()

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

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.