Set focus doesn't work properly

[matkudela]

Found a situation where set focus doesn't work. Tested on textual 0.86.3 and 0.83.0.
MRE:

from __future__ import annotations

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


class CustomContainer(Container):
    counter: int = reactive(0, recompose=True)

    def __init__(self, counter: int):
        super().__init__()
        self.counter = counter

    def compose(self) -> ComposeResult:
        yield Static(f"{self.counter}")
        with Horizontal():
            yield Button("+1", variant="success", id="add-value")
            yield Button("-1", variant="primary", id="subtract-value")


    @on(Button.Pressed, "#add-value")
    def increase_value(self):
        self.counter += 1
        increase_button = self.query_exactly_one("#add-value")
        self.screen.set_focus(increase_button)

    @on(Button.Pressed, "#subtract-value")
    def decrease_value(self):
        self.counter -= 1
        decrease_button = self.query_exactly_one("#subtract-value")
        self.screen.set_focus(decrease_button)


class MyApp(App):

    DEFAULT_CSS = """
        CustomContainer {
            height: 5;
        }
        
        Horizontal {
            margin-top: 1;
        }
    """
    def compose(self) -> ComposeResult:
        yield CustomContainer(0)
        yield Button("Just button", variant="primary")

MyApp().run()

I'd like to set focus on decrease/increase button after clicking it (and after recompose) by set_focus, but having this line brings no effect. Tried it with focus_next - no effect as well .

[willmcgugan]

When you recompose, Textual will destroy all widgets and replace them with newly composed widgets. This means that the button you set the focus on, no longer exists after recompose.

For something like this, it is generally simpler to explicitly update the button. Add a watch method and then update your content:

from __future__ import annotations

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


class CustomContainer(Container):
    counter: int = reactive(0, init=False)

    def __init__(self, counter: int):
        super().__init__()
        self.counter = counter

    def compose(self) -> ComposeResult:
        yield Static(f"{self.counter}", id="counter")
        with Horizontal():
            yield Button("+1", variant="success", id="add-value")
            yield Button("-1", variant="primary", id="subtract-value")

    def watch_counter(self, counter: int) -> None:
        self.query_one("#counter", Static).update(str(counter))

    @on(Button.Pressed, "#add-value")
    def increase_value(self):
        self.counter += 1

    @on(Button.Pressed, "#subtract-value")
    def decrease_value(self):
        self.counter -= 1


class MyApp(App):
    DEFAULT_CSS = """
        CustomContainer {
            height: 5;
        }
        
        Horizontal {
            margin-top: 1;
        }
    """

    def compose(self) -> ComposeResult:
        yield CustomContainer(0)
        yield Button("Just button", variant="primary")


MyApp().run()

If you want to use recompose, separate what you want to change from what you don't. Here's an example:

from __future__ import annotations

from textual import on
from textual.app import App, ComposeResult
from textual.widgets import Button, Static
from textual.containers import Horizontal, Container, VerticalGroup
from textual.reactive import reactive


class CounterDisplay(VerticalGroup):
    counter = reactive(0, recompose=True)

    def compose(self) -> ComposeResult:
        yield Static(str(self.counter))


class CustomContainer(Container):
    counter = reactive(0)

    def __init__(self, counter: int):
        super().__init__()
        self.counter = counter

    def compose(self) -> ComposeResult:
        yield CounterDisplay().data_bind(counter=CustomContainer.counter)
        with Horizontal():
            yield Button("+1", variant="success", id="add-value")
            yield Button("-1", variant="primary", id="subtract-value")

    @on(Button.Pressed, "#add-value")
    def increase_value(self):
        self.counter += 1

    @on(Button.Pressed, "#subtract-value")
    def decrease_value(self):
        self.counter -= 1


class MyApp(App):
    DEFAULT_CSS = """
        CustomContainer {
            height: 5;
        }

        Horizontal {
            margin-top: 1;
        }
    """

    def compose(self) -> ComposeResult:
        yield CustomContainer(0)
        yield Button("Just button", variant="primary")


MyApp().run()