From 9c2465f7852381598666f6dde7a9effa3559e67c Mon Sep 17 00:00:00 2001
From: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
Date: Tue, 8 Oct 2024 16:48:28 -0700
Subject: [PATCH] add keyboard event

---
 reflex/components/el/elements/forms.py        | 16 +++++++++-----
 .../radix/themes/components/text_area.py      |  6 ++---
 .../radix/themes/components/text_field.py     |  6 ++---
 reflex/event.py                               | 22 +++++++++++++++++++
 4 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py
index cb6273cda..05168e66c 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -10,7 +10,13 @@ from jinja2 import Environment
 from reflex.components.el.element import Element
 from reflex.components.tags.tag import Tag
 from reflex.constants import Dirs, EventTriggers
-from reflex.event import EventChain, EventHandler, input_event, prevent_default
+from reflex.event import (
+    EventChain,
+    EventHandler,
+    input_event,
+    key_event,
+    prevent_default,
+)
 from reflex.utils.imports import ImportDict
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
@@ -354,10 +360,10 @@ class Input(BaseHTML):
     on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
 
 
 class Label(BaseHTML):
@@ -595,10 +601,10 @@ class Textarea(BaseHTML):
     on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
 
     def _exclude_props(self) -> list[str]:
         return super()._exclude_props() + [
diff --git a/reflex/components/radix/themes/components/text_area.py b/reflex/components/radix/themes/components/text_area.py
index c0a905533..47137c9e3 100644
--- a/reflex/components/radix/themes/components/text_area.py
+++ b/reflex/components/radix/themes/components/text_area.py
@@ -6,7 +6,7 @@ from reflex.components.component import Component
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.core.debounce import DebounceInput
 from reflex.components.el import elements
-from reflex.event import EventHandler, input_event
+from reflex.event import EventHandler, input_event, key_event
 from reflex.vars.base import Var
 
 from ..base import (
@@ -92,10 +92,10 @@ class TextArea(RadixThemesComponent, elements.Textarea):
     on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down.
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released.
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/radix/themes/components/text_field.py b/reflex/components/radix/themes/components/text_field.py
index bea54ab1e..4277e93e0 100644
--- a/reflex/components/radix/themes/components/text_field.py
+++ b/reflex/components/radix/themes/components/text_field.py
@@ -8,7 +8,7 @@ from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.core.debounce import DebounceInput
 from reflex.components.el import elements
-from reflex.event import EventHandler, input_event
+from reflex.event import EventHandler, input_event, key_event
 from reflex.vars.base import Var
 
 from ..base import (
@@ -81,10 +81,10 @@ class TextFieldRoot(elements.Div, RadixThemesComponent):
     on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down.
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released.
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/event.py b/reflex/event.py
index e778b03d1..2fda11a85 100644
--- a/reflex/event.py
+++ b/reflex/event.py
@@ -415,6 +415,16 @@ class JavascriptInputEvent:
     target: JavascriptHTMLInputElement = JavascriptHTMLInputElement()
 
 
+@dataclasses.dataclass(
+    init=True,
+    frozen=True,
+)
+class JavasciptKeyboardEvent:
+    """Interface for a Javascript KeyboardEvent https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent."""
+
+    key: str = ""
+
+
 def input_event(e: Var[JavascriptInputEvent]) -> Tuple[str]:
     """Get the value from an input event.
 
@@ -427,6 +437,18 @@ def input_event(e: Var[JavascriptInputEvent]) -> Tuple[str]:
     return (e.target.value,)
 
 
+def key_event(e: Var[JavasciptKeyboardEvent]) -> Tuple[str]:
+    """Get the key from a keyboard event.
+
+    Args:
+        e: The keyboard event.
+
+    Returns:
+        The key from the keyboard event.
+    """
+    return (e.key,)
+
+
 @dataclasses.dataclass(
     init=True,
     frozen=True,