No 'text-area--gutter' key in COMPONENT_CLASSES

[femto]

The bug

"No 'text-area--gutter' key in COMPONENT_CLASSES"

luckliy I can produce a small file that can reproduce this bug:

#!/usr/bin/env python3
"""
Minimal reproduction of Textual bug with reactive(recompose=True) and custom TextArea

Bug: When a reactive property with recompose=True changes during key event handling,
it causes a compositor error in Screen.get_style_at() -> Compositor.get_style_at()

Error traceback:
  File ".../textual/screen.py", line 1640, in _forward_event
    event.style = self.get_style_at(event.screen_x, event.screen_y)
  File ".../textual/screen.py", line 685, in get_style_at
    return self._compositor.get_style_at(x, y)
  File ".../textual/_compositor.py", line 879, in get_style_at
    lines = widget.render_lines(Region(0, y, region.width, 1))
"""

from textual.app import App, ComposeResult
from textual.containers import Container, Vertical
from textual.widgets import TextArea, Static
from textual.reactive import reactive
from textual import on
from textual.events import Key
from textual.message import Message


class CustomTextArea(TextArea):
    """Custom TextArea that posts key events to parent"""

    class KeyPressed(Message):
        """Message posted when a key is pressed"""

        def __init__(self, key: str) -> None:
            super().__init__()
            self.key = key

    def on_key(self, event: Key) -> bool:
        """Handle key events and post to parent"""
        # Post key event to parent for handling
        self.post_message(self.KeyPressed(event.key))

        # Handle Enter - prevent default and let parent handle
        if event.key == "enter":
            event.prevent_default()
            event.stop()
            return True  # Prevent TextArea from handling

        # Let TextArea handle all other keys normally
        return False


class BuggyContainer(Container):
    """Container with reactive property that causes recomposition"""

    # This reactive property with recompose=True causes the bug
    is_loading = reactive(False, recompose=True)

    def compose(self) -> ComposeResult:
        """Compose the container with conditional content based on reactive property"""
        yield Static("Type in the TextArea below and press Enter to trigger the bug")
        yield Static(f"Loading state: {self.is_loading}")

        # Conditional rendering based on reactive property
        if self.is_loading:
            yield Static("🔄 Loading... (this appears when is_loading=True)")

        yield CustomTextArea(
            text="Type here and press Enter",
            id="main_input"
        )

        yield Static("Status: Ready")

    @on(CustomTextArea.KeyPressed)
    def on_custom_textarea_key(self, event: CustomTextArea.KeyPressed):
        """Handle key events from CustomTextArea"""
        if event.key == "enter":
            # This line triggers the bug by changing a reactive property with recompose=True
            # during the key event handling, which causes recomposition while the compositor
            # is still processing the original event
            self.is_loading = not self.is_loading

            # The bug occurs because:
            # 1. User presses Enter
            # 2. CustomTextArea.on_key() posts KeyPressed message
            # 3. This handler changes is_loading (reactive with recompose=True)
            # 4. Textual starts recomposition immediately
            # 5. Meanwhile, the original key event is still being processed by Screen._forward_event
            # 6. Screen._forward_event tries to call get_style_at() on the recomposing widget
            # 7. Compositor.get_style_at() fails because widget is in inconsistent state during recomposition


class BugReproductionApp(App):
    """Minimal app to reproduce the reactive recompose bug"""

    def compose(self) -> ComposeResult:
        yield BuggyContainer()

    def on_mount(self):
        self.title = "Textual Reactive Recompose Bug Reproduction"
        # Focus the text area
        self.set_timer(0.1, self._focus_textarea)

    def _focus_textarea(self):
        try:
            textarea = self.query_one("#main_input", expect_type=CustomTextArea)
            textarea.focus()
        except:
            pass


if __name__ == "__main__":
    print("Textual Reactive Recompose Bug Reproduction")
    print("=" * 50)
    print("Steps to reproduce:")
    print("1. Run this script")
    print("2. Click in the TextArea or it should be focused automatically")
    print("3. Press Enter")
    print("4. The bug should occur with a compositor error")
    print()
    print("Expected error:")
    print("  File '.../textual/_compositor.py', line 879, in get_style_at")
    print("    lines = widget.render_lines(Region(0, y, region.width, 1))")
    print()

    app = BugReproductionApp()
    app.run()

when enter at CustomTextArea

 /Users/femtozheng/python-project/first/venv/lib/python3.11/site-packages/textual/widget.py:1134 in get_component_rich_style                                                                                        │
│                                                                                                                                                                                                                    │
│   1131 │   │   """                                                                              ╭───────────────── locals ──────────────────╮                                                                      │
│   1132 │   │                                                                                    │   names = ('text-area--gutter',)          │                                                                      │
│   1133 │   │   if names not in self._rich_style_cache:                                          │ partial = False                           │                                                                      │
│ ❱ 1134 │   │   │   component_styles = self.get_component_styles(*names)                         │    self = CustomTextArea(id='main_input') │                                                                      │
│   1135 │   │   │   style = component_styles.rich_style                                          ╰───────────────────────────────────────────╯                                                                      │
│   1136 │   │   │   text_opacity = component_styles.text_opacity                                                                                                                                                    │
│   1137 │   │   │   if text_opacity < 1 and style.bgcolor is not None:                                                                                                                                              │
│                                                                                                                                                                                                                    │
│ /Users/femtozheng/python-project/first/venv/lib/python3.11/site-packages/textual/dom.py:600 in get_component_styles                                                                                                │
│                                                                                                                                                                                                                    │
│    597 │   │                                                                                    ╭──────────────────────── locals ────────────────────────╮                                                         │
│    598 │   │   for name in names:                                                               │   name = 'text-area--gutter'                           │                                                         │
│    599 │   │   │   if name not in self._component_styles:                                       │  names = ('text-area--gutter',)                        │                                                         │
│ ❱  600 │   │   │   │   raise KeyError(f"No {name!r} key in COMPONENT_CLASSES")                  │   self = CustomTextArea(id='main_input')               │                                                         │
│    601 │   │   │   component_styles = self._component_styles[name]                              │ styles = RenderStyles(CustomTextArea(id='main_input')) │                                                         │
│    602 │   │   │   styles.node = component_styles.node                                          ╰────────────────────────────────────────────────────────╯                                                         │
│    603 │   │   │   styles.base.merge(component_styles.base)                                                                                                                                                        │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
KeyError: "No 'text-area--gutter' key in COMPONENT_CLASSES"

<!-- This is valid Markdown, please paste the following directly in to a GitHub issue -->
# Textual Diagnostics

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 6.4.0  |
| Rich    | 14.2.0 |

## Python

| Name           | Value                                                  |
|----------------|--------------------------------------------------------|
| Version        | 3.11.4                                                 |
| Implementation | CPython                                                |
| Compiler       | Clang 13.1.6 (clang-1316.0.21.2.5)                     |
| Executable     | /Users/femtozheng/python-project/first/venv/bin/python |

## Operating System

| Name    | Value                                                                                             |
|---------|---------------------------------------------------------------------------------------------------|
| System  | Darwin                                                                                            |
| Release | 23.6.0                                                                                            |
| Version | Darwin Kernel Version 23.6.0: Mon Jul 29 21:13:00 PDT 2024; root:xnu-10063.141.2~1/RELEASE_X86_64 |

## Terminal

| Name                 | Value          |
|----------------------|----------------|
| Terminal Application | *Unknown*      |
| TERM                 | xterm-256color |
| COLORTERM            | *Not set*      |
| FORCE_COLOR          | *Not set*      |
| NO_COLOR             | *Not set*      |

## Rich Console options

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

If you don't have the textual command on your path, you may have forgotten to install the textual-dev package.

Feel free to add screenshots and / or videos. These can be very helpful!

[github-actions]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This project is developed and maintained by Will McGugan. Consider sponsoring Will's work on this project (and others).

This is an automated reply, generated by FAQtory

[TomJGooding]

I checked using a binding rather than the key events but this crashes with the same error.

Example code

from textual import on
from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import Container
from textual.message import Message
from textual.reactive import reactive
from textual.widgets import Static, TextArea


class CustomTextArea(TextArea):
    BINDINGS = [Binding("enter", "submit", "Submit", priority=True)]

    class Submitted(Message):
        def __init__(self, text: str) -> None:
            super().__init__()
            self.text = text

    def action_submit(self) -> None:
        self.post_message(self.Submitted(self.text))


class BuggyContainer(Container, can_focus=False):
    submit_count = reactive(0, recompose=True)

    def compose(self) -> ComposeResult:
        yield Static(f"Submit count: {self.submit_count}")
        yield CustomTextArea(
            "Press enter",
            id=f"text-area-{self.submit_count}",
        )

    @on(CustomTextArea.Submitted)
    def on_text_area_submitted(self) -> None:
        self.submit_count += 1


class ExampleApp(App):
    def compose(self) -> ComposeResult:
        yield BuggyContainer()


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

The console logs and traceback show that render_lines is being called on the old TextArea instance (note the widget id), after being unmounted with the recompose

Console logs

[17:03:30] SYSTEM                                                app.py:4098
<action> namespace=CustomTextArea(id='text-area-0') action_name='submit' 
params=()
[17:03:30] EVENT                                         message_pump.py:822
Submitted() >>> CustomTextArea(id='text-area-0') method=None
[17:03:30] EVENT                                         message_pump.py:813
Submitted() >>> BuggyContainer() 
method=<BuggyContainer.on_custom_text_area_submitted>
[17:03:30] DEBUG                                              screen.py:1083
focus was removed
[17:03:30] EVENT                                         message_pump.py:822
Submitted() >>> Screen(id='_default') method=None
[17:03:30] EVENT                                         message_pump.py:813
Unmount() >>> Static() method=<Widget.on_unmount>
[17:03:30] EVENT                                         message_pump.py:813
Blur() >>> CustomTextArea(id='text-area-0') method=<Widget.on_blur>
[17:03:30] EVENT                                         message_pump.py:813
Unmount() >>> CustomTextArea(id='text-area-0') method=<Widget.on_unmount>
[17:03:30] EVENT                                         message_pump.py:813
Mount() >>> Static() method=<Widget.on_mount>
[17:03:30] EVENT                                         message_pump.py:813
Mount() >>> CustomTextArea(id='text-area-1') method=<TextArea.on_mount>
[17:03:30] EVENT                                         message_pump.py:813
Mount() >>> CustomTextArea(id='text-area-1') method=<ScrollView.on_mount>
[17:03:30] EVENT                                         message_pump.py:813
Mount() >>> CustomTextArea(id='text-area-1') method=<Widget.on_mount>
[17:03:30] EVENT                                         message_pump.py:822
Submitted() >>> ExampleApp(title='ExampleApp', classes={'-dark-mode'}, 
pseudo_classes={'dark', 'focus'}) method=None

Traceback

╭─────────────────── Traceback (most recent call last) ────────────────────╮
│ /home/tom/Projects/textual/src/textual/widgets/_text_area.py:1198 in     │
│ render_lines                                                             │
│                                                                          │
│   1195 │   def render_lines(self, crop: Region) -> list[Strip]:          │
│   1196 │   │   theme = self._theme                                       │
│   1197 │   │   if theme:                                                 │
│ ❱ 1198 │   │   │   theme.apply_css(self)                                 │
│   1199 │   │   return super().render_lines(crop)                         │
│   1200 │                                                                 │
│   1201 │   def render_line(self, y: int) -> Strip:                       │

# --- snip ---

│ /home/tom/Projects/textual/src/textual/dom.py:615 in                     │
│ get_component_styles                                                     │
│                                                                          │
│    612 │   │                                                             │
│    613 │   │   for name in names:                                        │
│    614 │   │   │   if name not in self._component_styles:                │
│ ❱  615 │   │   │   │   raise KeyError(f"No {name!r} key in COMPONENT_CLA │
│    616 │   │   │   component_styles = self._component_styles[name]       │
│    617 │   │   │   styles.node = component_styles.node                   │
│    618 │   │   │   styles.base.merge(component_styles.base)              │
│                                                                          │
│ ╭──────────────────────── locals ─────────────────────────╮              │
│ │   name = 'text-area--gutter'                            │              │
│ │  names = ('text-area--gutter',)                         │              │
│ │   self = CustomTextArea(id='text-area-0')               │              │
│ │ styles = RenderStyles(CustomTextArea(id='text-area-0')) │              │
│ ╰─────────────────────────────────────────────────────────╯              │
╰──────────────────────────────────────────────────────────────────────────╯
KeyError: "No 'text-area--gutter' key in COMPONENT_CLASSES"

After some fruitless debugging and finally trying git bisect, I have found that reverting this change in df7a304 ...

diff --git a/src/textual/app.py b/src/textual/app.py
index 32254ea82..126099316 100644
--- a/src/textual/app.py
+++ b/src/textual/app.py
@@ -3469,6 +3469,7 @@ class App(Generic[ReturnType], DOMNode):
             self._registry.add(child)
             child._attach(parent)
             child._post_register(self)
+            child._start_messages()
 
     def _register(
         self,
@@ -3521,7 +3522,6 @@ class App(Generic[ReturnType], DOMNode):
                     self._register(widget, *widget._nodes, cache=cache)
         for widget in new_widgets:
             apply_stylesheet(widget, cache=cache)
-            widget._start_messages()
 
         if not self._running:
             # If the app is not running, prevent awaiting of the widget tasks

... seems prevent this crash, but I'm struggling to understand why so this might not be the correct fix (especially as it causes other snapshot tests to fail).

I thought I should share my investigations in case it helps fix this.

[femto]

I have another case, that when I submit in CustomTextArea,
and try to call llm, I have a Messages component above CustomTextArea,
so I need to first append this user's message to it, then call llm
to retrieve llm response to append to Messages again, when hit enter
in textarea, the ui just halts and after llm response will be both messages
append to Messages component. And the loading_indicator (the spinning
component wounldn't show). Any idea on that?

The component structure is like this, REPL has Messages and Input,
Input submit should update Messages(it's parent's components, so ui update
is happening in parent). Is it possible that child workers
will block parent's ui update? I tried first add user message first and then
immedicate call run_worker of calling llm, with no luck. The Messages component
's update_messages has self.mutate_reactive in it, which shouldn't be a problem.
If I return after adding user message and don't do call llm, then Messages immediately
shows user message.

Unfortunately I can't produce a small reproducible example,
if you want I want point you to my open source repository for the example,
and maybe schedule a session on how to set it up.(basically it's a cli agent
like claude code, has input to submit query).

[TomJGooding]

I'd suggest creating a new discussion or asking for help on Discord, but you might find the Anatomy of a Textual User Interface blog post helpful. Note the use of a worker to prevent blocking the UI.

[willmcgugan]

The issue is broadly that you are using recompose in on_key. Recompose will remove and re-add your widgets. If you remove the TextArea while it is processing keys, then it will break.

Could we make that not error? maybe But it is never going to be the recommended way of building such things.

What I recommend is that you describe what you want to implement, and I'm sure we can suggest a more canonical solution. The Discord server is probably the best place for that.

[github-actions]

I hope I solved your issue!

Consider sponsoring my work to continue to maintain and develop Textual.

• Will McGugan