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.

[TomJGooding]

For what it's worth, I don't think this is unique to the OptionList. I suspect this is an issue for any render-based widget that uses caching. For example, try running the modified example code below using a Tree instead of an OptionList.

I think the issue is more apparent if you click to focus the Input within the container, rather than tabbing through the widgets. I haven't delved into this too deeply yet, but it seems the problem is that the render caches don't account for the :focus-within pseudo-class state of its parent.

Although this particular problem doesn't seem unique to the OptionList, unlike other widgets that use caching, I did notice that the cache key for the options doesn't seem to account pseudo-classes at all?

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


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;
        }

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

    def compose(self) -> ComposeResult:
        yield Input(placeholder="This is here to escape to")
        with Panel():
            tree: Tree[str] = Tree("Dune")
            tree.root.expand()
            characters = tree.root.add("Characters", expand=True)
            characters.add_leaf("Paul")
            characters.add_leaf("Jessica")
            characters.add_leaf("Chani")
            yield tree

            yield Input(placeholder="Escape out via here for the bug")


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

[TomJGooding]

A possible workaround for this issue in the meantime is repeating the same CSS within the :focus-within rule:

        &:focus-within {
            background: yellow;

            OptionList, OptionList:focus {
                background: transparent;
            }
        }

Full code example

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


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;

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

        &:focus {
            background: yellow;
        }

        &:focus-within {
            background: yellow;

            OptionList, OptionList:focus {
                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()