From 4314605d839809b4e550981f589c0b9a15fc7b09 Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Wed, 9 Oct 2024 13:20:52 -0700
Subject: [PATCH] textarea: handle special behaviors during `create`

Move special behavior handling to `create` classmethod to allow carrying of
added props when wrapped in debounce, which does not call `_render` on the
child component.
---
 reflex/components/el/elements/forms.py  | 58 +++++++++++++++----------
 reflex/components/el/elements/forms.pyi | 11 +++--
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py
index 1963f8b37..9b366cf1c 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -600,6 +600,42 @@ class Textarea(BaseHTML):
     # Fired when a key is released
     on_key_up: EventHandler[lambda e0: [e0.key]]
 
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a textarea component.
+
+        Args:
+            *children: The children of the textarea.
+            **props: The properties of the textarea.
+
+        Returns:
+            The textarea component.
+
+        Raises:
+            ValueError: when `enter_key_submit` is combined with `on_key_down`.
+        """
+        enter_key_submit = props.get("enter_key_submit")
+        auto_height = props.get("auto_height")
+        custom_attrs = props.setdefault("custom_attrs", {})
+
+        if enter_key_submit is not None:
+            enter_key_submit = Var.create(enter_key_submit)
+            if "on_key_down" in props:
+                raise ValueError(
+                    "Cannot combine `enter_key_submit` with `on_key_down`.",
+                )
+            custom_attrs["on_key_down"] = Var(
+                _js_expr=f"(e) => enterKeySubmitOnKeyDown(e, {str(enter_key_submit)})",
+                _var_data=VarData.merge(enter_key_submit._get_all_var_data()),
+            )
+        if auto_height is not None:
+            auto_height = Var.create(auto_height)
+            custom_attrs["on_input"] = Var(
+                _js_expr=f"(e) => autoHeightOnInput(e, {str(auto_height)})",
+                _var_data=VarData.merge(auto_height._get_all_var_data()),
+            )
+        return super().create(*children, **props)
+
     def _exclude_props(self) -> list[str]:
         return super()._exclude_props() + [
             "auto_height",
@@ -619,28 +655,6 @@ class Textarea(BaseHTML):
             custom_code.add(ENTER_KEY_SUBMIT_JS)
         return custom_code
 
-    def _render(self) -> Tag:
-        tag = super()._render()
-        if self.enter_key_submit is not None:
-            if "on_key_down" in self.event_triggers:
-                raise ValueError(
-                    "Cannot combine `enter_key_submit` with `on_key_down`.",
-                )
-            tag.add_props(
-                on_key_down=Var(
-                    _js_expr=f"(e) => enterKeySubmitOnKeyDown(e, {str(self.enter_key_submit)})",
-                    _var_data=VarData.merge(self.enter_key_submit._get_all_var_data()),
-                )
-            )
-        if self.auto_height is not None:
-            tag.add_props(
-                on_input=Var(
-                    _js_expr=f"(e) => autoHeightOnInput(e, {str(self.auto_height)})",
-                    _var_data=VarData.merge(self.auto_height._get_all_var_data()),
-                )
-            )
-        return tag
-
 
 button = Button.create
 fieldset = Fieldset.create
diff --git a/reflex/components/el/elements/forms.pyi b/reflex/components/el/elements/forms.pyi
index 5677eb741..253d4ff3a 100644
--- a/reflex/components/el/elements/forms.pyi
+++ b/reflex/components/el/elements/forms.pyi
@@ -1658,10 +1658,10 @@ class Textarea(BaseHTML):
         ] = None,
         **props,
     ) -> "Textarea":
-        """Create the component.
+        """Create a textarea component.
 
         Args:
-            *children: The children of the component.
+            *children: The children of the textarea.
             auto_complete: Whether the form control should have autocomplete enabled
             auto_focus: Automatically focuses the textarea when the page loads
             auto_height: Automatically fit the content height to the text (use min-height with this prop)
@@ -1701,10 +1701,13 @@ class Textarea(BaseHTML):
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The properties of the textarea.
 
         Returns:
-            The component.
+            The textarea component.
+
+        Raises:
+            ValueError: when `enter_key_submit` is combined with `on_key_down`.
         """
         ...