Increase debounce timeout to 300ms (#2541)

reflex/components/chakra/forms/input.py

@@ -91,15 +91,9 @@ class Input(ChakraComponent):
         Returns:
             The component.
         """
-        if (
+        if props.get("value") is not None and props.get("on_change"):
-            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)
             # create a debounced input if the user requests full control to avoid typing jank
-            return DebounceInput.create(
+            return DebounceInput.create(super().create(*children, **props))
-                super().create(*children, **props), debounce_timeout=debounce_timeout
-            )
         return super().create(*children, **props)
 
 

reflex/components/chakra/forms/textarea.py

@@ -74,13 +74,7 @@ class TextArea(ChakraComponent):
         Returns:
             The component.
         """
-        if (
+        if props.get("value") is not None and props.get("on_change"):
-            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)
             # create a debounced input if the user requests full control to avoid typing jank
-            return DebounceInput.create(
+            return DebounceInput.create(super().create(*children, **props))
-                super().create(*children, **props), debounce_timeout=debounce_timeout
-            )
         return super().create(*children, **props)

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]

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

reflex/components/radix/themes/components/textarea.py

@@ -40,15 +40,9 @@ class TextArea(RadixThemesComponent, el.Textarea):
         Returns:
             The component.
         """
-        if (
+        if props.get("value") is not None and props.get("on_change"):
-            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)
             # create a debounced input if the user requests full control to avoid typing jank
-            return DebounceInput.create(
+            return DebounceInput.create(super().create(*children, **props))
-                super().create(*children, **props), debounce_timeout=debounce_timeout
-            )
         return super().create(*children, **props)
 
     def get_event_triggers(self) -> Dict[str, Any]:

reflex/components/radix/themes/components/textfield.py

@@ -54,15 +54,9 @@ class TextFieldInput(el.Input, TextFieldRoot):
         Returns:
             The component.
         """
-        if (
+        if props.get("value") is not None and props.get("on_change"):
-            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)
             # create a debounced input if the user requests full control to avoid typing jank
-            return DebounceInput.create(
+            return DebounceInput.create(super().create(*children, **props))
-                super().create(*children, **props), debounce_timeout=debounce_timeout
-            )
         return super().create(*children, **props)
 
     def get_event_triggers(self) -> Dict[str, Any]:

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 == ""