Use empty string for None values in rx.input and rx.el.input

reflex/components/el/elements/forms.py

@@ -7,6 +7,7 @@ from typing import Any, Dict, Iterator, Set, Tuple, Union
 
 from jinja2 import Environment
 
+from reflex.components.core.cond import cond
 from reflex.components.el.element import Element
 from reflex.components.tags.tag import Tag
 from reflex.constants import Dirs, EventTriggers
@@ -384,6 +385,24 @@ class Input(BaseHTML):
     # Fired when a key is released
     on_key_up: EventHandler[key_event]
 
+    @classmethod
+    def create(cls, *children, **props):
+        """Create an Input component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The component.
+        """
+        value = props.get("value")
+
+        # React expects an empty string(instead of null) for uncontrolled inputs.
+        if value is not None:
+            props["value"] = cond(value, value, "")
+        return super().create(*children, **props)
+
 
 class Label(BaseHTML):
     """Display the label element."""

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

@@ -6,6 +6,7 @@ from typing import Literal, Union
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
+from reflex.components.core.cond import cond
 from reflex.components.core.debounce import DebounceInput
 from reflex.components.el import elements
 from reflex.event import EventHandler, input_event, key_event
@@ -96,6 +97,12 @@ class TextFieldRoot(elements.Div, RadixThemesComponent):
         Returns:
             The component.
         """
+        value = props.get("value")
+
+        # React expects an empty string(instead of null) for uncontrolled inputs.
+        if value is not None:
+            props["value"] = cond(value, value, "")
+
         component = super().create(*children, **props)
         if props.get("value") is not None and props.get("on_change") is not None:
             # create a debounced input if the user requests full control to avoid typing jank