When an OptionList has a transparent background option colours can get out of sync (since 0.86.0)

[davep]

Given this code:

from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import OptionList, Input

class Panel(Vertical, can_focus=True):
    pass

class FocusWithinTransparentApp(App[None]):

    CSS = """
    Screen {
        layout: horizontal;
    }

    Input {
        width: 1fr;
        height: 1fr;
    }

    Panel {
        padding: 5 10;
        background: red;
        &:focus, &:focus-within {
            background: yellow;
        }

        OptionList, OptionList:focus {
            height: 1fr;
            background: transparent;
        }
    }
    """

    def compose(self) -> ComposeResult:
        yield Input(placeholder="This is here to escape to")
        with Panel():
            yield OptionList(*["This is an option" for _ in range(30)])
            yield Input(placeholder="Escape out via here for the bug")

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

If you tab into the right panel the background of the OptionList updates as you'd expect (goes from red to yellow, as per its background), but if you keep tabbing through and land back in the left panel, the OptionList's options' backgrounds will be out of sync with its parent (they will remain with a yellow background when it should be red). Actions that cause a refresh of some sort (resize of window, some mouse movements) cause the background to refresh to the correct colour.

Screen.Recording.2025-01-20.at.10.57.03.mov

Textual Diagnostics

Versions

Name	Value
Textual	1.0.0
Rich	13.9.4

Python

Name	Value
Version	3.13.1
Implementation	CPython
Compiler	Clang 16.0.0 (clang-1600.0.26.4)
Executable	/Users/davep/temp/x/.venv/bin/python

Operating System

Name	Value
System	Darwin
Release	24.2.0
Version	Darwin Kernel Version 24.2.0: Fri Dec 6 18:51:28 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T8112

Terminal

Name	Value
Terminal Application	ghostty (1.0.1)
TERM	xterm-256color
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=124, height=63
legacy_windows	False
min_width	1
max_width	124
is_terminal	False
encoding	utf-8
max_height	63
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

[davep]

With #5431 in mind, I've checked, and this effect only seems to come in with Textual 0.86 too.