diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py index a82d6bcdd..4d4becbd1 100644 --- a/reflex/components/el/elements/forms.py +++ b/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.""" diff --git a/reflex/components/radix/themes/components/text_field.py b/reflex/components/radix/themes/components/text_field.py index 3dabe0936..5819b8934 100644 --- a/reflex/components/radix/themes/components/text_field.py +++ b/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