Focusing on a button when I am on an element that contains it

[jakubziebin]

I have an element that contains some Static elements and one Button, structured like this::

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield Static("Example static")
            yield Button("Example button", id="example-button")

Is there a way to achieve an effect similar to that of a classic button like this ?

[davep]

Are you saying you want to make the Horizontal look like a Button, while also containing a Static and a Button?

[jakubziebin]

Yes, but i do not see that Buttons have focus - thats the problem. I`ll send example

[TomJGooding]

When I go through the screen using Tab [...] I want to have focus on Button when I'm on one of the Example element.

Unless I am also struggling to understand what you mean, isn't this what Textual does already...?

I've quickly tried to recreate your example above (but based on Horizontal rather than Widget). When I click Tab, it focusses the next Button.

If this isn't what you're seeing, could you tell us what Textual version you're using?

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


class Example(Horizontal):
    DEFAULT_CSS = """

    Example {
        height: 3;
        margin-bottom: 1;
    }

    .odd {
        background: $primary-background;
        width: 16;
        height: 3;
        content-align: center middle;
    }

    .even {
        background: $primary-background-darken-2;
        width: 16;
        height: 3;
        content-align: center middle;
    }
    """

    def compose(self) -> ComposeResult:
        yield Static("example_1", classes="odd")
        yield Static("example_2", classes="even")
        yield Button("example_3", id="example-button")


class MyApp(App):
    def compose(self) -> ComposeResult:
        for _ in range(5):
            yield Example()


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

[jakubziebin]

Hm yes, you are right. I tried it on the latest version of textual and it is ok, but I am using 0.31.0 in the app. This is more or less the structure of my screen.

from textual.app import App, ComposeResult
from textual.containers import Horizontal, ScrollableContainer
from textual.widgets import Button, Static, TabPane, TabbedContent


class Example(Horizontal):
    DEFAULT_CSS = """

    Example {
        height: 3;
        margin-bottom: 1;
    }

    .odd {
        background: $primary-background;
        width: 16;
        height: 3;
        content-align: center middle;
    }

    .even {
        background: $primary-background-darken-2;
        width: 16;
        height: 3;
        content-align: center middle;
    }
    """

    def compose(self) -> ComposeResult:
        yield Static("example_1", classes="odd")
        yield Static("example_2", classes="even")
        yield Button("example_3", id="example-button")


class NextExample(ScrollableContainer):
    def compose(self) -> ComposeResult:
        for _ in range(5):
            yield Example()


class ExampleTabPane(TabPane):
    def compose(self) -> ComposeResult:
        yield NextExample()


class MyApp(App):
    def compose(self) -> ComposeResult:
        with TabbedContent():
            yield ExampleTabPane("example")


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

[davep]

Off the top of my head, I don't recall any changes after 0.31.0 that would change this behaviour; but if the latest version of Textual is working for you it would make sense to use the later version.

[TomJGooding]

This is more or less the structure of my screen...

I've tested your example with the latest version of Textual and tabbing the Buttons works as expected.

After installing v0.31.0 and adding height: auto to the ScrollableContainer, the tabbing still works as expected.

So did you actually check your example demonstrates the issue you're describing? Or is there still something we are missing here?

[jakubziebin]

Yes, but I have solved the problem. I replaced the use of Static by Label and now it works fine.

[davep]

I very much suspect that something else will have affected the behaviour there; changing from Static to Label in the code you gave would make no difference to but focus works (moreover, Label is really just a Static with a different type, they're almost identical).