TextArea should (optionally?) hide its cursor when it doesn't have focus

[davep]

Especially when building an input dialog, it would be natural to include Input and TextArea for different types of input, and so then also natural to want to style them in the same way in respect to focus. For example:

from textual.app import App, ComposeResult
from textual.events import Key
from textual.widgets import Input, TextArea

class TabbyTextArea(TextArea):

    DEFAULT_CSS = """
    TabbyTextArea {
        background: $boost;
        color: $text;
        padding: 0 2;
        border: tall $background;
    }

    TabbyTextArea:focus {
        border: tall $accent;
    }
    """

    def on_mount(self) -> None:
        self.show_line_numbers = False

    async def _on_key(self, event: Key) -> None:
        if event.key == "tab":
            event.prevent_default()
            self.screen.focus_next()

class CursorApp(App[None]):

    def compose(self) -> ComposeResult:
        for _ in range(5):
            yield Input()
            yield TabbyTextArea()

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

This mostly works except for the fact that TextArea keeps a cursor showing (albeit one that doesn't flash when there is no focus).

Screen.Recording.2023-11-22.at.09.20.43.mov

I feel we should make it so that the cursor isn't visible when the TextArea doesn't have focus.

---

See also #3405

[willmcgugan]

I think this is probably a good idea. Darren is working on a refactor of TextArea. Will talk to @darrenburns when he's back

[darrenburns]

I've covered this off in #4074.

[TomJGooding]

If you didn't want to hide the cursor when blurred, presumably it would be simple enough to inherit and just override a method or two?

[darrenburns]

@TomJGooding You should be able to do:

    def watch_has_focus(self, value: bool) -> None:
        super().watch_has_focus(value)
        self._cursor_visible = True

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.