Focus on ScrollableContainers only if Scroll is present

[jakubziebin]

I was quite surprised to see that scrolling containers have focus all the time, not just when the scroll is present. This was very confusing for me as I moved around app and had one blind focus and for a long time I didn't know which element was stealing it. We solved the problem in our app, but shouldn't this behaviour be basic?

[davep]

To best address this I feel it would need a MRE of the kind of situation you were looking at, and also mention of which scrollable containers you have in mind.

I'm going to guess for now that VerticalScroll would be a good example as it's a scrollable container that is designed to receive focus. With that in mind, consider this example code:

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

class ScrollAndFocusApp(App[None]):

    def compose(self) -> ComposeResult:
        with Horizontal():
            with VerticalScroll():
                for n in range(256):
                    yield Static(f"This is widget {n}")
            with VerticalScroll():
                yield Static("\n".join([f"This is line {n}" for n in range(256)]))
            with VerticalScroll():
                for n in range(256):
                    yield Button(f"This is button {n}")

if __name__ == "__main__":
    ScrollAndFocusApp().run()

The first two instance of VerticalScroll need to receive focus so that they can scroll their content; in the first case the content being first a collection of widgets that never receive focus themselves, the second case being a single widget that is taller than its container, that widget also not being capable of receiving focus. In terms of styling and navigation it would be unusual to have either of those containers only receive focus if the content is taller than the container (for example, the content might be changing in realtime and so the focus order for the screen would be changing all the time, something which may confuse the user).

The third container is, I would agree, a little different. It contains widgets which themselves can receive focus, and in this case I'd feel that it makes no sense for the VerticalScroll to receive focus because moving focus through the buttons will handle that anyway.

In this case I'd probably change the above code to be more like this:

            with VerticalScroll() as buttons:
                buttons.can_focus = False
                for n in range(256):
                    yield Button(f"This is button {n}")

In that instance the container still scrolls with arrow keys, with the mouse and also keeps the focused button in view too.

So, the general rule I'd personally follow is: if the VerticalScroll only contains content that can't itself receive focus, then the "out of the box" behaviour makes perfect sense. If, on the other hand, I'm going to be placing one or more widgets inside it that can themselves receive focus, then I'd set its can_focus property to False.

Hopefully that explains the thinking and approach here, and makes a wee bit more sense. Also, if your requirement is one that's not anticipated here, perhaps you could write something similar to better illustrate the surprise you experienced?

[jakubziebin]

So in my situation it was something like this:

from textual.app import App, ComposeResult
from textual.containers import Container, Horizontal, VerticalScroll
from textual.widgets import Static, TabPane, TabbedContent



class LeftContainer(Container):
    pass


class RightContainer(Container):
    pass


class MyTabPane(TabPane):
    def compose(self) -> ComposeResult:
        with Horizontal():
            with LeftContainer():
                yield Static("My example")
            with RightContainer():
                with Container():
                    with VerticalScroll():
                        yield Static("I stole focus !")


class MyApp(App):
    def compose(self) -> ComposeResult:
        with TabbedContent():
            yield MyTabPane("first")
            yield TabPane("second")


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

I couldn't reproduce my situation, but when I entered the screen, the focus was not on Tabs first, but on VerticalScroll element. So when moving around the screen it was one empty focus and i had to press Tab one time to start moving through the Tabs, I think it might be more intuitive if containers like this get can_focus to True when the scroll is visible.

[davep]

Perhaps I've misunderstood, but I'm not seeing a problem in your example, and I don't think I quite understand the problem you're describing. It would be helpful if you could give a clear working example of the situation you're trying to describe.

I think it would be helpful if you could be more clear about what you mean when you say "containers like this". By default scrolling containers can get focus, and I think I demonstrated why that would make sense, and also in which cases it makes sense to turn it off in your code; and given you're in control of what is composed into your containers it would also seem to make sense that you control that flag.

None of this is to say that there isn't a case to consider for what you're saying; but it's hard to assess it without a clear and reproducible example of the problem you're trying to find a solution for.