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)