What causes this odd hover behavior with a widget and '@click' and 'key' meta rendering Rich tables?

[jspv]

I have a Rich table which uses meta={"@click": someval, "key": someval} to make some columns hover/clickable (modeled directly after the code in the footer widget). The hover highlight is a color that was not part of my palette and nothing I seemed to put in my CSS changed it and I tried to figure out why.

I found the following in _footer.py that when I added to my Widget code, my CSS style applied - but only for a short time

    def post_render(self, renderable):
        return renderable

The Red coloring is my CSS style correctly being applied, but when I wiggle the cursor a little bit it will change to that blue color.

Can someone explain what the post_render code block does and why is it needed to have my CSS style applied?
Also, any thoughts on what causes that other color to render and how to stop it?

I've added sample code that demonstrates the behavior:

from textual.app import App, ComposeResult
from textual.widgets import Static
from rich.table import Table
from rich.text import Text
from textual import events
from textual.reactive import Reactive


class Grid(Static):

    COMPONENT_CLASSES = {"grid--highlight-key"}

    DEFAULT_CSS = """
    Grid>.grid--highlight-key {
        color: red;
    }
    """

    highlight_key: Reactive[str | None] = Reactive(None)

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self._table_text = None

    async def watch_highlight_key(self, value) -> None:
        """If highlight key changes we need to regenerate the text."""
        self._table_text = None

    async def on_mouse_move(self, event: events.MouseMove) -> None:
        """Store any key we are moving over."""
        self.highlight_key = event.style.meta.get("key")

    def make_table(self):
        highlight_key_style = self.get_component_rich_style("grid--highlight-key")
        base_style = self.rich_style

        table = Table(show_lines=False)
        table.add_column("Col1", width=6, justify="center")
        table.add_column("Col2", width=20, justify="center")
        for key in range(5):
            hovered = self.highlight_key == key
            key_text = Text.assemble(
                (
                    f"[{key}]",
                    highlight_key_style if hovered else base_style,
                ),
                meta={"@click": f"some_action('{key}')", "key": key},
            )
            table.add_row(key_text, f"This is row {key}")

        return table

    def render(self):
        if self._table_text is None:
            self._table_text = self.make_table()
        return self._table_text

    def post_render(self, renderable):
        return renderable


class GridExample(App):
    def compose(self) -> ComposeResult:
        yield Grid()


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

[davep]

I wonder if, perhaps, it would make more sense to use the link styles? From what I can see you're adding your own component styling that's fighting with the builtin link styling. I sense that this might be closer to what you'er trying to do?

from textual.app import App, ComposeResult
from textual.widgets import Static
from rich.table import Table
from rich.text import Text

class Grid(Static):

    DEFAULT_CSS = """
    Grid {
        link-hover-color: red;
        link-hover-background: black;
        link-style: none;
    }
    """

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self._table_text = None

    def make_table(self):
        table = Table(show_lines=False)
        table.add_column("Col1", width=6, justify="center")
        table.add_column("Col2", width=20, justify="center")
        for key in range(5):
            key_text = Text.assemble(
                f"[{key}]", meta={"@click": f"some_action('{key}')", "key": key},
            )
            table.add_row(key_text, f"This is row {key}")

        return table

    def render(self):
        if self._table_text is None:
            self._table_text = self.make_table()
        return self._table_text


class GridExample(App):
    def compose(self) -> ComposeResult:
        yield Grid()


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

[jspv]

Thank you, very helpful!

[davep]

Most welcome, glad it helped. :-)