OptionList does not persist highlighted options after it loses focus

[boanergies]

I recently upgraded to the latest textual in my project and for some reason my OptionLists when they lose focus don't keep the option highlighted if one was clicked while the OptionList was in focus.

I was on 0.27.0 before upgrading to this latest version of 0.36.0. I was able to replicate my problem using the code below and the following tcss file:

rom textual.app import App, ComposeResult
from textual.widgets import Footer, Header, OptionList


class OptionListApp(App[None]):
    CSS_PATH = "option_list.tcss"

    def compose(self) -> ComposeResult:
        yield Header()
        yield OptionList(
            "Aerilon",
            "Aquaria",
            "Canceron",
            "Caprica",
            "Gemenon",
            "Leonis",
            "Libran",
            "Picon",
            "Sagittaron",
            "Scorpia",
            "Tauron",
            "Virgon",
        )
        yield OptionList(
            "Aerilon",
            "Aquaria",
            "Canceron",
            "Caprica",
            "Gemenon",
            "Leonis",
            "Libran",
            "Picon",
            "Sagittaron",
            "Scorpia",
            "Tauron",
            "Virgon",
        )
        yield Footer()


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

Screen {
    align: center middle;
}

OptionList {
    width: 70%;
    height: 80%;
}

The screen shots below show my issue, I click the first OptionList and then go to the second one. As soon as the first OptionList loses focus it does not indicate anymore which option was highlighted previously by my click.

I've confirmed if I query the OptionList it still says who was highlighted but for a GUI user it would be hard to know what was highlighted

[davep]

My memory is a wee bit hazy on this, but the OptionList styling for an unfocused highlight doesn't seem to have changed from the original release. I can't for sure say if anything else has changed that could affect this, but I'm not seeing anything to suggest that styling has changed.

However, if you want the effect you're looking for, you can add it to your app's CSS. Something like:

    OptionList > .option-list--option-highlighted {
        background: $accent 40%;
    }

    OptionList:focus > .option-list--option-highlighted {
        background: $accent;
    }

(or of course whatever fits your app's styling)

[TomJGooding]

@davep It looks like the styling did change in #2777 - previously the highlighted option had background: $accent 50%

[davep]

Good spot! I suspected that PR but couldn't obviously see anything in the blame.

I was off by 10% too. 🤷🏻‍♀️

Anyway, presumably a deliberate choice as part of that PR so the advice above should hold.

[boanergies]

The advice above does hold, I didn't need the focus one for it to work. I had an inkling that PR was the reason, glad we found the issue

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[TomJGooding]

Good spot! I suspected that PR but couldn't obviously see anything in the blame.

I was off by 10% too. 🤷🏻‍♀️

Anyway, presumably a deliberate choice as part of that PR so the advice above should hold.

Haha, not bad only being off by 10%!

If this was a deliberate choice, I'm not sure I agree with it...

I actually had to double-check there wasn't a bug, as the bold styling really doesn't stand out (at least with my terminal/font). But also this doesn't seem consistent with other widgets like DataTable, where the background highlighting persists regardless if it is currently focussed?

[davep]

It's not quite to my taste either; I believe we do have an outstanding and overarching issue relating to conducting a wider review of styles as they pertain to widgets with some form of cursor or highlight. Hopefully it'll be settled with that.