[ENG-4153]Use empty string for None values in rx.input and rx.el.input

[ElijahAhianyo]

React expects empty strings instead of null values for the value prop of the input component. putting this in a cond allows the input field to be updated when the value is None

[linear]

ENG-4153 rx.[el.]input broken with null/None values

[benedikt-bartscher]

Closes #4445

Thanks, @ElijahAhianyo!

I would love to have an integration test for the use case mentioned in my issue. I can add it if you want

[masenf]

It seems like adding a ternary to every value prop on every text input is a bit excessive. maybe we can check isoptional(value._var_type) and apply the ternary in that case.

This does potentially create an issue where the Var is not typed optional, but still ends up with a None value, however the fix for that is to improve the annotation of the Var.

I know it's probably negligible and maybe not worth optimizing for, but perhaps we should profile text field re-render time with and without a ternary in the value?

[benedikt-bartscher]

It seems like adding a ternary to every value prop on every text input is a bit excessive. maybe we can check isoptional(value._var_type) and apply the ternary in that case.

This would be great and keep the generated code simpler and faster for values which will never be None

This does potentially create an issue where the Var is not typed optional, but still ends up with a None value, however the fix for that is to improve the annotation of the Var.

I agree, we should not bother too much about wrongly annotated vars.

I know it's probably negligible and maybe not worth optimizing for, but perhaps we should profile text field re-render time with and without a ternary in the value?

While profiling is a great idea, I think it's a bit overkill if we only do this for optional values. However, I do not want to stop anyone from doing that :D

[ElijahAhianyo]

Closes #4445

Thanks, @ElijahAhianyo!

I would love to have an integration test for the use case mentioned in my issue. I can add it if you want

yeah sure, feel free to add to this :),and ill just focus on the other comments

[ElijahAhianyo]

For now, the code below should work:

import reflex as rx
import random


class State(rx.State):
    name: rx.Field[str | None] = "Hello world"


def index() -> rx.Component:
    return rx.container(
        rx.button("Clear", on_click=lambda: State.set_name(None)),
        rx.text("rx.input"),
        rx.input(value=State.name, on_change=State.set_name),
        rx.text("rx.el.input"),
        rx.el.input(value=State.name),
    )


app = rx.App()
app.add_page(index)

However, we'll need this #4528 to work without rx.Field:

class State(rx.State):
    name: str | None = "Hello world"
  # name: Optional[str] = "Hello world"
    

[masenf]

nit: aren't these controlled inputs when a value is passed

[ElijahAhianyo]

ah yeah, good catch

[benedikt-bartscher]

Integration test is here: #4448