Disable a button based on a reactive variable

[nnmm]

I want to disable/enable a button when some precondition is met (in this example, another button has been clicked). Why does this apparently not perform a re-layout when self.ready is changed? I.e. the button stays disabled.

from textual.app import App, ComposeResult
from textual.reactive import reactive
from textual.widgets import Button

class MyApp(App):
    ready = reactive(False, layout=True)

    async def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == 'enable':
            self.ready = True
        
    def compose(self) -> ComposeResult:
        yield Button('Enable', variant='primary', id='enable')
        yield Button('Do the thing', variant='primary', id='do_the_thing', disabled=not self.ready)

if __name__ == '__main__':
    MyApp().run()

[davep]

A re-layout isn't the same as calling compose. The compose method builds your app content just the once so it's not going to be called again. To react to ready being changed you want to be using a watch method . So perhaps go with something more like this:

from textual.app import App, ComposeResult
from textual.reactive import reactive
from textual.widgets import Button

class MyApp(App):
    ready = reactive(False,init=False)

    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == 'enable':
            self.ready = True

    def watch_ready(self, ready: bool) -> None:
        self.query_one( "#do_the_thing", Button).disabled = not ready

    def compose(self) -> ComposeResult:
        yield Button('Enable', variant='primary', id='enable')
        yield Button('Do the thing', variant='primary', id='do_the_thing', disabled=not self.ready)

if __name__ == '__main__':
    MyApp().run()

[nnmm]

Thanks for the quick answer @davep! I had somehow assumed that textual works mostly like an immediate mode UI, i.e. reactive variables are the "state" and compose() will be called as needed to map that state to UI elements.