From 31462ad14d5e3eb037fec13d644d9bfd8aade180 Mon Sep 17 00:00:00 2001
From: Elijah <elijahahianyo@gmail.com>
Date: Thu, 12 Dec 2024 19:21:05 +0000
Subject: [PATCH] address comment on doing this only for optionals

---
 reflex/components/el/elements/forms.py                  | 7 +++++--
 reflex/components/radix/themes/components/text_field.py | 8 +++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py
index cfa1cb0aa..4c54cddf4 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -18,6 +18,7 @@ from reflex.event import (
     prevent_default,
 )
 from reflex.utils.imports import ImportDict
+from reflex.utils.types import is_optional
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
 
@@ -400,9 +401,11 @@ class Input(BaseHTML):
         value = props.get("value")
 
         # React expects an empty string(instead of null) for uncontrolled inputs.
-        if value is not None:
+        if value is not None and is_optional(
+            (value_var := Var.create(value))._var_type
+        ):
             props["value"] = ternary_operation(
-                ((value_var := Var.create(value)) != Var.create(None))
+                (value_var != Var.create(None))
                 & (value_var != Var(_js_expr="undefined")),
                 value,
                 "",
diff --git a/reflex/components/radix/themes/components/text_field.py b/reflex/components/radix/themes/components/text_field.py
index af146d172..82c59fa2c 100644
--- a/reflex/components/radix/themes/components/text_field.py
+++ b/reflex/components/radix/themes/components/text_field.py
@@ -9,6 +9,7 @@ from reflex.components.core.breakpoints import Responsive
 from reflex.components.core.debounce import DebounceInput
 from reflex.components.el import elements
 from reflex.event import EventHandler, input_event, key_event
+from reflex.utils.types import is_optional
 from reflex.vars.base import Var
 from reflex.vars.number import ternary_operation
 
@@ -100,10 +101,11 @@ class TextFieldRoot(elements.Div, RadixThemesComponent):
         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)
+        if value is not None and is_optional(
+            (value_var := Var.create(value))._var_type
+        ):
             props["value"] = ternary_operation(
-                ((value_var := Var.create(value)) != Var.create(None))
+                (value_var != Var.create(None))
                 & (value_var != Var(_js_expr="undefined")),
                 value,
                 "",