From f5067d4050c4cff7e5435754ccab33721a4f1556 Mon Sep 17 00:00:00 2001
From: Martin Xu <15661672+martinxu9@users.noreply.github.com>
Date: Fri, 18 Aug 2023 16:58:35 -0700
Subject: [PATCH] add prop `debounce_timeout` to input and textarea, default to
 50 (#1627)

---
 reflex/components/forms/input.py    | 7 ++++++-
 reflex/components/forms/textarea.py | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/reflex/components/forms/input.py b/reflex/components/forms/input.py
index 33b2cf8c5..daf584d55 100644
--- a/reflex/components/forms/input.py
+++ b/reflex/components/forms/input.py
@@ -50,6 +50,9 @@ class Input(ChakraComponent):
     # "lg" | "md" | "sm" | "xs"
     size: Var[str]
 
+    # Time in milliseconds to wait between end of input and triggering on_change
+    debounce_timeout: Var[int]
+
     def _get_imports(self) -> imports.ImportDict:
         return imports.merge_imports(
             super()._get_imports(),
@@ -84,7 +87,9 @@ class Input(ChakraComponent):
         if isinstance(props.get("value"), Var) and props.get("on_change"):
             # create a debounced input if the user requests full control to avoid typing jank
             return DebounceInput.create(
-                super().create(*children, **props), debounce_timeout=0
+                super().create(*children, **props),
+                # Currently default to 50ms, which appears to be a good balance
+                debounce_timeout=props.get("debounce_timeout", 50),
             )
         return super().create(*children, **props)
 
diff --git a/reflex/components/forms/textarea.py b/reflex/components/forms/textarea.py
index 16541311f..69520a278 100644
--- a/reflex/components/forms/textarea.py
+++ b/reflex/components/forms/textarea.py
@@ -43,6 +43,9 @@ class TextArea(ChakraComponent):
     # "outline" | "filled" | "flushed" | "unstyled"
     variant: Var[str]
 
+    # Time in milliseconds to wait between end of input and triggering on_change
+    debounce_timeout: Var[int]
+
     def get_controlled_triggers(self) -> Dict[str, Var]:
         """Get the event triggers that pass the component's value to the handler.
 
@@ -71,6 +74,8 @@ class TextArea(ChakraComponent):
         if isinstance(props.get("value"), Var) and props.get("on_change"):
             # create a debounced input if the user requests full control to avoid typing jank
             return DebounceInput.create(
-                super().create(*children, **props), debounce_timeout=0
+                super().create(*children, **props),
+                # Currently default to 50ms, which appears to be a good balance
+                debounce_timeout=props.get("debounce_timeout", 50),
             )
         return super().create(*children, **props)