The scroll_visible method behaves erratically for uncomposed widgets

[davidfokkema]

When you add a widget to a container and call new_widget.scroll_visible() the container should scroll down to make that widget visible. That works for composed widgets (widgets having a compose() method) but behaves erratically for simple static widgets (widgets having only an on_mount() method). When you add new widgets through a key binding, it seems to work as expected. However, if you add widgets through an automatic process like an interval timer the scroll behaviour is very erratic. In my experience, it mostly scrolls to the top of the container instead of the bottom. However, if you scroll back and forth you can see that it sometimes stays fixed at the bottom for a bit and then jumps to the middle or top again.

I've included example code. Press 'g' or 'p' to see that manually adding widgets does not seem to be a problem. Start a good timer or a problem timer to see the difference between composed and uncomposed widgets being added automatically to the container.

from textual.app import App
from textual.containers import Container
from textual.widgets import Header, Footer, Static


class GoodWidget(Static):
    def compose(self):
        yield Static("Works")


class ProblemWidget(Static):
    def on_mount(self):
        self.update("Breaks in timer")


class ScrollApp(App):

    BINDINGS = [
        ("g", "add_good_widget", "Good"),
        ("p", "add_problem_widget", "Problem"),
        ("ctrl+g", "start_good_timer", "Start good timer"),
        ("ctrl+p", "start_problem_timer", "Start problem timer"),
        ("r", "reset", "Reset"),
        ("q", "quit", "Quit"),
    ]

    def compose(self):
        """Called to add widgets to the app."""
        self.good_timer = self.set_interval(
            0.2, self.action_add_good_widget, pause=True
        )
        self.problem_timer = self.set_interval(
            0.2, self.action_add_problem_widget, pause=True
        )
        yield Header()
        yield Footer()
        yield Container(id="widgets")

    def action_add_good_widget(self):
        new_widget = GoodWidget()
        self.query_one("#widgets").mount(new_widget)
        new_widget.scroll_visible()

    def action_add_problem_widget(self):
        new_widget = ProblemWidget()
        self.query_one("#widgets").mount(new_widget)
        new_widget.scroll_visible()

    def action_start_good_timer(self):
        self.good_timer.resume()

    def action_start_problem_timer(self):
        self.problem_timer.resume()

    def action_reset(self):
        self.good_timer.pause()
        self.problem_timer.pause()
        for widget in reversed(self.query_one("#widgets").children):
            widget.remove()


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

[davep]

I'm not 100% certain, but I suspect the issue here is that you're attempting to scroll to a widget that, at the time of the request, may not be fully available in the DOM yet. I'd be tempted to write your problem method like this:

    async def action_add_problem_widget(self):
        new_widget = ProblemWidget()
        await self.query_one("#widgets").mount(new_widget)
        new_widget.scroll_visible()

Trying that here seems to make all the difference for me.

As a slight aside (nothing to do with the issue here), you could write your reset action more like this:

    def action_reset(self):
        self.good_timer.pause()
        self.problem_timer.pause()
        self.query("#widgets > *").remove()

Saves looping over all the children. :-)

[davidfokkema]

Thanks, Dave! I was beginning to wonder about this but had no idea I could simply await the mount() method. It works in my full app, too, so I'm happy. Thanks! The stopwatch tutorial also uses scroll_visible() and should probably await the mount() as well? I'm not entirely clear on the mixing of async and synchronous code in Textual. Maybe 'synchronous' mount() should block until the widget is mounted?

[davidfokkema]

And thanks for the oneliner to remove all widgets. I forgot about the child combinator and universal selector. I knew there had to be a better way, 😉.

[davep]

No worries, glad to help. More than one way to skin a widget, for sure. ;-)

[davep]

The stopwatch tutorial also uses scroll_visible() and should probably await the mount() as well? I'm not entirely clear on the mixing of async and synchronous code in Textual. Maybe 'synchronous' mount() should block until the widget is mounted?

I'll have to defer to @willmcgugan for those questions I'm afraid (or at least catch up with him tomorrow and get back to you).

I'll bump this over into the Questions in Discussions to keep it in mind and keep going.