From eacd5341371843765591eea8353899840f4bf641 Mon Sep 17 00:00:00 2001 From: Nikhil Rao Date: Thu, 8 Feb 2024 02:55:43 +0700 Subject: [PATCH] Increase debounce timeout to 300ms (#2541) --- reflex/components/chakra/forms/input.py | 10 ++-------- reflex/components/chakra/forms/textarea.py | 10 ++-------- reflex/components/core/debounce.py | 4 +++- reflex/components/core/debounce.pyi | 2 ++ reflex/components/radix/themes/components/textarea.py | 10 ++-------- reflex/components/radix/themes/components/textfield.py | 10 ++-------- tests/components/forms/test_debounce.py | 5 +++-- 7 files changed, 16 insertions(+), 35 deletions(-) diff --git a/reflex/components/chakra/forms/input.py b/reflex/components/chakra/forms/input.py index 9b6edb369..363878f62 100644 --- a/reflex/components/chakra/forms/input.py +++ b/reflex/components/chakra/forms/input.py @@ -91,15 +91,9 @@ class Input(ChakraComponent): Returns: The component. """ - if ( - isinstance(props.get("value"), Var) and props.get("on_change") - ) or "debounce_timeout" in props: - # Currently default to 50ms, which appears to be a good balance - debounce_timeout = props.pop("debounce_timeout", 50) + if props.get("value") is not None 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=debounce_timeout - ) + return DebounceInput.create(super().create(*children, **props)) return super().create(*children, **props) diff --git a/reflex/components/chakra/forms/textarea.py b/reflex/components/chakra/forms/textarea.py index 1591a35ea..ecbe15e1e 100644 --- a/reflex/components/chakra/forms/textarea.py +++ b/reflex/components/chakra/forms/textarea.py @@ -74,13 +74,7 @@ class TextArea(ChakraComponent): Returns: The component. """ - if ( - isinstance(props.get("value"), Var) and props.get("on_change") - ) or "debounce_timeout" in props: - # Currently default to 50ms, which appears to be a good balance - debounce_timeout = props.pop("debounce_timeout", 50) + if props.get("value") is not None 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=debounce_timeout - ) + return DebounceInput.create(super().create(*children, **props)) return super().create(*children, **props) diff --git a/reflex/components/core/debounce.py b/reflex/components/core/debounce.py index 21cfcc91a..2767e8d21 100644 --- a/reflex/components/core/debounce.py +++ b/reflex/components/core/debounce.py @@ -7,6 +7,8 @@ from reflex.components.component import Component from reflex.constants import EventTriggers from reflex.vars import Var, VarData +DEFAULT_DEBOUNCE_TIMEOUT = 300 + class DebounceInput(Component): """The DebounceInput component is used to buffer input events on the client side. @@ -23,7 +25,7 @@ class DebounceInput(Component): min_length: Var[int] # Time to wait between end of input and triggering on_change - debounce_timeout: Var[int] + debounce_timeout: Var[int] = DEFAULT_DEBOUNCE_TIMEOUT # type: ignore # If true, notify when Enter key is pressed force_notify_by_enter: Var[bool] diff --git a/reflex/components/core/debounce.pyi b/reflex/components/core/debounce.pyi index 9cd13e9ad..db9a3e8b0 100644 --- a/reflex/components/core/debounce.pyi +++ b/reflex/components/core/debounce.pyi @@ -12,6 +12,8 @@ from reflex.components.component import Component from reflex.constants import EventTriggers from reflex.vars import Var, VarData +DEFAULT_DEBOUNCE_TIMEOUT = 300 + class DebounceInput(Component): @overload @classmethod diff --git a/reflex/components/radix/themes/components/textarea.py b/reflex/components/radix/themes/components/textarea.py index 0fe0ca575..f196c12d9 100644 --- a/reflex/components/radix/themes/components/textarea.py +++ b/reflex/components/radix/themes/components/textarea.py @@ -40,15 +40,9 @@ class TextArea(RadixThemesComponent, el.Textarea): Returns: The component. """ - if ( - isinstance(props.get("value"), Var) and props.get("on_change") - ) or "debounce_timeout" in props: - # Currently default to 50ms, which appears to be a good balance - debounce_timeout = props.pop("debounce_timeout", 50) + if props.get("value") is not None 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=debounce_timeout - ) + return DebounceInput.create(super().create(*children, **props)) return super().create(*children, **props) def get_event_triggers(self) -> Dict[str, Any]: diff --git a/reflex/components/radix/themes/components/textfield.py b/reflex/components/radix/themes/components/textfield.py index 1b840cd74..fba6362b9 100644 --- a/reflex/components/radix/themes/components/textfield.py +++ b/reflex/components/radix/themes/components/textfield.py @@ -54,15 +54,9 @@ class TextFieldInput(el.Input, TextFieldRoot): Returns: The component. """ - if ( - isinstance(props.get("value"), Var) and props.get("on_change") - ) or "debounce_timeout" in props: - # Currently default to 50ms, which appears to be a good balance - debounce_timeout = props.pop("debounce_timeout", 50) + if props.get("value") is not None 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=debounce_timeout - ) + return DebounceInput.create(super().create(*children, **props)) return super().create(*children, **props) def get_event_triggers(self) -> Dict[str, Any]: diff --git a/tests/components/forms/test_debounce.py b/tests/components/forms/test_debounce.py index 97cfa8648..d893ba02c 100644 --- a/tests/components/forms/test_debounce.py +++ b/tests/components/forms/test_debounce.py @@ -3,6 +3,7 @@ import pytest import reflex as rx +from reflex.components.core.debounce import DEFAULT_DEBOUNCE_TIMEOUT from reflex.state import BaseState from reflex.vars import BaseVar @@ -107,7 +108,7 @@ def test_full_control_implicit_debounce(): value=S.value, on_change=S.on_change, )._render() - assert tag.props["debounceTimeout"]._var_name == "50" + assert tag.props["debounceTimeout"]._var_name == str(DEFAULT_DEBOUNCE_TIMEOUT) assert len(tag.props["onChange"].events) == 1 assert tag.props["onChange"].events[0].handler == S.on_change assert tag.contents == "" @@ -119,7 +120,7 @@ def test_full_control_implicit_debounce_text_area(): value=S.value, on_change=S.on_change, )._render() - assert tag.props["debounceTimeout"]._var_name == "50" + assert tag.props["debounceTimeout"]._var_name == str(DEFAULT_DEBOUNCE_TIMEOUT) assert len(tag.props["onChange"].events) == 1 assert tag.props["onChange"].events[0].handler == S.on_change assert tag.contents == ""