Checkbox and RadioButton does not work with the latest version of Windows Terminal

[ofek]

Neither clicking nor the key bindings work to change state using the examples from the documentation on https://github.com/microsoft/terminal/releases/tag/v1.17.1023

Checkbox

from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import Checkbox


class CheckboxApp(App[None]):
    DEFAULT_CSS = """
    Screen {
        align: center middle;
    }

    Vertical {
        width: auto;
        height: auto;
        border: solid $primary;
        background: $panel;
        padding: 2;
    }
    """

    def compose(self) -> ComposeResult:
        with Vertical():
            yield Checkbox("Arrakis :sweat:")
            yield Checkbox("Caladan")
            yield Checkbox("Chusuk")
            yield Checkbox("[b]Giedi Prime[/b]")
            yield Checkbox("[magenta]Ginaz[/]")
            yield Checkbox("Grumman", True)
            yield Checkbox("Kaitain", id="initial_focus")
            yield Checkbox("Novebruns", True)

    def on_mount(self):
        self.query_one("#initial_focus", Checkbox).focus()


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

RadioButton

from textual.app import App, ComposeResult
from textual.widgets import RadioButton, RadioSet


class RadioChoicesApp(App[None]):
    DEFAULT_CSS = """
    Screen {
        align: center middle;
    }

    RadioSet {
        width: 50%;
    }
    """

    def compose(self) -> ComposeResult:
        with RadioSet():
            yield RadioButton("Battlestar Galactica")
            yield RadioButton("Dune 1984")
            yield RadioButton("Dune 2021", id="focus_me")
            yield RadioButton("Serenity", value=True)
            yield RadioButton("Star Trek: The Motion Picture")
            yield RadioButton("Star Wars: A New Hope")
            yield RadioButton("The Last Starfighter")
            yield RadioButton(
                "Total Recall :backhand_index_pointing_right: :red_circle:"
            )
            yield RadioButton("Wing Commander")

    def on_mount(self) -> None:
        self.query_one("#focus_me", RadioButton).focus()


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

Textual Diagnostics

Versions

Name	Value
Textual	0.13.0
Rich	13.2.0

Python

Name	Value
Version	3.11.1
Implementation	CPython
Compiler	MSC v.1934 64 bit (AMD64)
Executable	C:\USERS\OFEK\APPDATA\LOCAL\PROGRAMS\PYTHON\PYTHON311\PYTHON.EXE

Operating System

Name	Value
System	Windows
Release	10
Version	10.0.19045

Terminal

Name	Value
Terminal Application	Windows Terminal
TERM	Not set
COLORTERM	Not set
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

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

[willmcgugan]

What appears to be happening is that the state is indeed changing, its just that Windows Terminal is displaying the cross and bullet characters as images rather than monochrome, which means the on and off state don't look any different.

I think we can force the text version with a unicode trick. If we can't, we will have to pick different characters for Windows.

[davep]

So, testing here... given OS version 10.0.19045 that would seem to be Windows 10, is that correct @ofek? I tested here on Windows 11 (10.0.22621) and got ever so slightly different results using Windows Terminal 1.16.10262.0.

Radio buttons are more or less as shown in the above screenshots. On the other hand checkboxes are perfectly fine and work just as they do in iTerm under macOS (although of course there's any number of font issues to worry about there too I would imagine).

Now, taking this:

I think we can force the text version with a unicode trick.

as an idea, which I take to mean this, it didn't fix anything for me with the radio buttons on Windows 11, instead making the layout of the screen have showing/hiding text artefacts on mouse hover.

As a comparison I also tested HyperTerm on Windows 11 and without the "trick" it showed the same character problem, with the "trick" it totally threw off the composition of the whole of the app, with every line being off by one character.

To be clear (admittedly quick and dirty) test I tried was this:

diff --git a/src/textual/widgets/_toggle_button.py b/src/textual/widgets/_toggle_button.py
index 40be4e61..4a10827f 100644
--- a/src/textual/widgets/_toggle_button.py
+++ b/src/textual/widgets/_toggle_button.py
@@ -170,7 +170,7 @@ class ToggleButton(Static, can_focus=True):

         return Text.assemble(
             (self.BUTTON_LEFT, side_style),
-            (self.BUTTON_INNER, button_style),
+            (self.BUTTON_INNER + "\ufe0e", button_style),
             (self.BUTTON_RIGHT, side_style),
         )

on macOS in iTerm, with the above applied, it works just as before; that is it works as planned and adding this "trick" makes no difference (which is what we'd expect). I didn't test any other terminals on macOS (yet).

Long story short: it looks like Windows Terminal on Windows 10 and 11 doesn't even behave the same, and the "trick" (assuming I did the quick test correctly) causes even further problems for Windows Terminal (or at least causes further problems for Textual on Windows Terminal).

More testing to be done, of course. This was just a Saturday night idle curiosity quick test.

[ofek]

That's correct I'm on Windows 10

[ofek]

Maybe related? microsoft/terminal#13110 (comment)

[davep]

Confirmed locally: using Windows Terminal:

• Checkbox on Windows 10 doesn't display well
• Checkbox on Windows 11 is fine
• RadioButton on Windows 10 doesn't display well
• RadioButton on Windows 11 doesn't display well

We'll look for alternative characters first that are supported by Windows 10 and 11, in Windows Terminal (and of course which display fine on other operating systems and in the main terminals).

[davep]

Current front-runner for the new character for radio buttons. Still need to figure out how to show on/off but that's a detail...

[ofek]

I'm interested in anything that works of course, but what are the other current options? I don't find the actual radio icon very appealing at all

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.