use ternary operator so old browsers and dynamic components tests pass

reflex/components/el/elements/forms.py

@@ -395,11 +395,18 @@ class Input(BaseHTML):
         Returns:
             The component.
         """
+        from reflex.vars.number import ternary_operation
+
         value = props.get("value")
 
         # React expects an empty string(instead of null) for uncontrolled inputs.
         if value is not None:
-            props["value"] = Var(_js_expr=f"{value} ?? ''", _var_type=str)
+            props["value"] = ternary_operation(
+                ((value_var := Var.create(value)) != Var.create(None))
+                & (value_var != Var(_js_expr="undefined")),
+                value,
+                "",
+            )
         return super().create(*children, **props)
 
 

reflex/components/radix/themes/components/text_field.py

@@ -10,6 +10,7 @@ from reflex.components.core.debounce import DebounceInput
 from reflex.components.el import elements
 from reflex.event import EventHandler, input_event, key_event
 from reflex.vars.base import Var
+from reflex.vars.number import ternary_operation
 
 from ..base import LiteralAccentColor, LiteralRadius, RadixThemesComponent
 
@@ -100,7 +101,13 @@ class TextFieldRoot(elements.Div, RadixThemesComponent):
 
         # React expects an empty string(instead of null) for uncontrolled inputs.
         if value is not None:
-            props["value"] = Var(_js_expr=f"{value} ?? ''", _var_type=str)
+            # props["value"] = Var(_js_expr=f"{value} ?? ''", _var_type=str)
+            props["value"] = ternary_operation(
+                ((value_var := Var.create(value)) != Var.create(None))
+                & (value_var != Var(_js_expr="undefined")),
+                value,
+                "",
+            )
 
         component = super().create(*children, **props)
         if props.get("value") is not None and props.get("on_change") is not None:

tests/units/components/core/test_debounce.py

@@ -6,6 +6,7 @@ import reflex as rx
 from reflex.components.core.debounce import DEFAULT_DEBOUNCE_TIMEOUT
 from reflex.state import BaseState
 from reflex.vars.base import LiteralVar, Var
+from reflex.vars.number import ternary_operation
 
 
 def test_create_no_child():
@@ -60,8 +61,13 @@ def test_render_child_props():
     assert "css" in tag.props and isinstance(tag.props["css"], rx.vars.Var)
     for prop in ["foo", "bar", "baz", "quuc"]:
         assert prop in str(tag.props["css"])
+    value_var = Var.create("real")
     assert tag.props["value"].equals(
-        Var(_js_expr="real ?? ''", _var_type=str)
+        ternary_operation(
+            (value_var != Var.create(None)) & (value_var != Var(_js_expr="undefined")),
+            "real",
+            "",
+        )
     )
     assert len(tag.props["onChange"].events) == 1
     assert tag.props["onChange"].events[0].handler == S.on_change