Key binding for switching between widgets not working

[criatle808]

After working through the documentation I still couldn't figure out where the error is. In the following example, switching the widgets by pressing the buttons works, but the key binding defined in the widgets doesn't work. The expected behavior of this snippet is to be able to switch between the two widgets by pressing "b" when the Frontside widget is mounted, and by pressing "f" when the Backside widget is mounted.

The behavior that confuses me:

• After startup, the widget's key binding for "b" shows up in the footer, but it doesn't react to the "b" key press. (picture 1)
• After clicking the button to flip widget to the other one, in addition to not reacting, the key binding only shows up in the footer while keeping the button pressed down. (picture 2 - 3)

BTW, is it better to mount both at the same time and turn the other one invisible instead?

from textual import events
from textual.app import App, ComposeResult
from textual.containers import Container
from textual.widgets import Button, Static
from textual.widgets import Footer


class Frontside(Static):
    BINDINGS = [
        ("b", "flip_to_backside", "Flip to backside"),
    ]

    def compose(self) -> ComposeResult:
        yield Container(
            Static("Example Frontside", classes="fronside"),
            Button("Show backside", id="show_backside", variant="primary"),
            id="frontside",
        )


class Backside(Static):
    BINDINGS = [
        ("f", "flip_to_frontside", "Flip to frontside"),
    ]

    def compose(self) -> ComposeResult:
        yield Container(
            Static("Example Backside", classes="backside"),
            Button("Show frontside", id="show_frontside", variant="primary"),
            id="backside",
        )


class Flashcard(Static):
    def action_flip_to_backside(self) -> None:
        self.query_one("Frontside").remove()
        self.query_one("#page").mount(Backside())

    def action_flip_to_frontside(self) -> None:
        self.query_one("Backside").remove()
        self.query_one("#page").mount(Frontside())

    def compose(self) -> ComposeResult:
        yield Container(Frontside(), id='page')

    def on_button_pressed(self, event: events.Key) -> None:
        match event.button.id:
            case 'show_backside':
                self.action_flip_to_backside()
            case 'show_frontside':
                self.action_flip_to_frontside()


class FlashcardBox(Static):
    def compose(self) -> ComposeResult:
        yield Flashcard()


class FlashcardApp(App):
    BINDINGS = [
        ("e", "exit", "Exit"),
    ]

    def compose(self) -> ComposeResult:
        yield FlashcardBox()
        yield Footer()

    def action_exit(self) -> None:
        exit()


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

[willmcgugan]

Widgets will register bindings when they have focus. You first need to tell Textual that a widget can receive focus by adding can_focus=True to the class declaration.

So if you want to focus on your backside, you can do this:

class Backside(Static, can_focus=True):
    ...

[criatle808]

Thank you for the quick reply, but this did not work with my particular example, the behavior is still exactly the same as before.

[willmcgugan]

That may be because your actions aren't defined on the widgets with the bindings. Textual won't look in parent widgets for action methods.

[willmcgugan]

Re visibility. If your content isn't that dynamic then it is often easier to mount them both and show/hide by setting the display attribute. But there is nothing wrong with your current approach.

[criatle808]

Thank you very much, it works now and I'll post the full working example here below as a reference for others that want to implement switching widgets.

One follow-up question, if I switch the two lines that start with self.parent...., on key/button press it will throw an AttributeError: 'NoneType' object has no attribute 'mount'. Why is the order important here?

    def action_flip_to_backside(self) -> None:
        self.parent.mount(Backside())
        self.parent.query_one("Frontside").remove()

Thank you very much for everything.

Full working example for switching widgets:

from textual import events
from textual.app import App, ComposeResult
from textual.containers import Container
from textual.widgets import Button, Static
from textual.widgets import Footer


class Frontside(Static, can_focus=True):
    BINDINGS = [
        ("b", "flip_to_backside", "Flip to backside"),
    ]

    def compose(self) -> ComposeResult:
        yield Container(
            Static("Example Frontside", classes="fronside"),
            id="frontside",
        )

    def action_flip_to_backside(self) -> None:
        self.parent.mount(Backside())
        self.parent.query_one("Frontside").remove()


class Backside(Static, can_focus=True):
    BINDINGS = [
        ("f", "flip_to_frontside", "Flip to frontside"),
    ]

    def compose(self) -> ComposeResult:
        yield Container(
            Static("Example Backside", classes="backside")
        )

    def action_flip_to_frontside(self) -> None:
        self.parent.mount(Frontside())
        self.parent.query_one("Backside").remove()


class FlashcardApp(App):
    BINDINGS = [
        ("e", "exit", "Exit"),
    ]

    def compose(self) -> ComposeResult:
        yield Frontside()
        yield Footer()

    def action_exit(self) -> None:
        exit()


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

[willmcgugan]

    def action_flip_to_backside(self) -> None:
        self.parent.mount(Backside())
        self.parent.query_one("Frontside").remove()

The line self.parent.query_one("Frontside").remove() is essentially removing itself (equivalent to self.remove()). With the widget no longer on the DOM, it will not have a parent.

You may want to read the guide on coordinating widgets, in particular the section on "data flow"

[criatle808]

Thank you very much! I oversaw that self.parent.query_one("Frontside").remove() is equal to self.remove() here, so it actually did remove itself and in the next line did try to access itself via self, which didn't exist anymore at that point. Will also read into the widget guide. Thank you.