Scrollbar getting focus when not visible

[chrisstjohn]

I have a simple app with an input box, vertical scroll containing markdown, and a button to exit the application.

When the markdown content isn't large enough to show the vertical scroll it still gets focus on TAB from input to button which is poor UX since you can't tell when it has focus because the vertical scroll is not visible. My app is based on the dictionary.py example which I think suffers from the same problem.

I'd like to see an update to the dictionary.py example that demonstrates selective enabling the ability to focus the vertical scroll.

[rodrigogiraoserrao]

Hey @chrisstjohn, thanks for your issue.

When I run dictionary.py and I TAB around, I can focus the vertical scroll and I get a blue border showing me where the focus is. Don't you get a similar visual indication in your app? If you don't, you can use TCSS and the :focus pseudoclass to add a visual indication when your focus is in another widget.

To me, it makes sense that the VerticalScroll in dictionary.py is focusable even when there's nothing to scroll. I feel it's similar to how you're able to focus a button with TAB, regardless of whether clicking that button does something or not.

Now, what I'm focusing is a VerticalScroll and not a Markdown widget, so maybe there's some confusion in your case and focus is actually going somewhere else (you also can't see?). Maybe share an MRE of your app/context.

[mzebrak]

@chrisstjohn IDK if this will help you in any way, but I'll leave a link to https://github.com/Textualize/textual/discussions/3717

[willmcgugan]

The dictionary example does now show focus. If you want to implement a widget that is only focusable when it can be scrolled, you can use this pattern:

from textual import on
from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.widgets import Button, Label

class MaybeFocus(VerticalScroll, can_focus=False):

    def watch_show_vertical_scrollbar(self) -> None:
        self.can_focus = self.show_horizontal_scrollbar or self.show_vertical_scrollbar

    def watch_show_horizontal_scrollbar(self) -> None:
        self.can_focus = self.show_horizontal_scrollbar or self.show_vertical_scrollbar

class FocusWhenScrollApp(App[None]):

    CSS = """
    Label {
        height: 5;
        background: red;
        width: 1fr;
    }
    """

    def compose(self) -> ComposeResult:
        yield Button("MORE!")
        yield MaybeFocus()

    @on(Button.Pressed)
    def more(self) -> None:
        self.query_one(MaybeFocus).mount(Label("Stuff"))

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

[github-actions[bot]]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.