add prop debounce_timeout to input and textarea, default to 50 (#1627)

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)
 

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)