fix: let rx.input take the HTML autocomplete string, and turn a bool into "on" or "off"

packages/reflex-components-radix/news/+text-field-auto-complete.bugfix.md

@@ -0,0 +1 @@
+`rx.input`'s `auto_complete` now takes the HTML autocomplete value, such as `"off"` or `"email"`, which used to raise a `TypeError`. A bool still works and now becomes `"on"` or `"off"`; before, React dropped it and browser autocomplete stayed on.

packages/reflex-components-radix/src/reflex_components_radix/themes/components/text_field.py

@@ -6,7 +6,7 @@
 
 from reflex_base.components.component import Component, ComponentNamespace, field
 from reflex_base.event import EventHandler, input_event, key_event
-from reflex_base.utils.types import is_optional
+from reflex_base.utils.types import is_optional, safe_issubclass, value_inside_optional
 from reflex_base.vars.base import Var
 from reflex_base.vars.number import ternary_operation
 from reflex_components_core.core.breakpoints import Responsive
@@ -42,8 +42,8 @@ class TextFieldRoot(elements.Input, RadixThemesComponent):
         doc='Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"'
     )
 
-    auto_complete: Var[bool] = field(
-        doc="Whether the input should have autocomplete enabled"
+    auto_complete: Var[str] = field(
+        doc='The autocomplete hint, e.g. "off", "on" or "email". True and False become "on" and "off".'
     )
 
     default_value: Var[str] = field(
@@ -103,6 +103,17 @@ def create(cls, *children, **props) -> Component:
         Returns:
             The component.
         """
+        # React drops a bool autoComplete, the DOM takes a string
+        auto_complete = props.get("auto_complete")
+        if isinstance(auto_complete, bool):
+            props["auto_complete"] = "on" if auto_complete else "off"
+        elif isinstance(auto_complete, Var) and safe_issubclass(
+            value_inside_optional(auto_complete._var_type), bool
+        ):
+            props["auto_complete"] = ternary_operation(
+                auto_complete, Var.create("on"), Var.create("off")
+            )
+
         value = props.get("value")
 
         # React expects an empty string(instead of null) for controlled inputs.

tests/units/reflex_components_radix/themes/components/test_text_field.py

@@ -0,0 +1,30 @@
+from typing import Any
+
+import pytest
+from reflex_base.vars.base import Var
+from reflex_components_radix.themes.components.text_field import TextFieldRoot
+
+
+@pytest.mark.parametrize(
+    ("auto_complete", "expected"),
+    [
+        ("off", '"off"'),
+        ("email", '"email"'),
+        (False, '"off"'),
+        (True, '"on"'),
+        (Var(_js_expr="enabled", _var_type=bool), '(enabled ? "on" : "off")'),
+        (Var(_js_expr="flag", _var_type=bool | None), '(flag ? "on" : "off")'),
+        (Var(_js_expr="hint", _var_type=str), "hint"),
+        (Var(_js_expr="maybe_hint", _var_type=str | None), "maybe_hint"),
+    ],
+)
+def test_auto_complete_renders_a_string(auto_complete: Any, expected: str):
+    """React drops a bool autoComplete, so a bool becomes "on" or "off".
+
+    Args:
+        auto_complete: The auto_complete prop, typed str but still accepting a bool.
+        expected: The rendered autoComplete value.
+    """
+    text_field = TextFieldRoot.create(auto_complete=auto_complete)
+
+    assert f"autoComplete:{expected}" in str(text_field)