<input> has no value inside <dialog>

If I use an example controlled input component on an <App /> root it renders with the initial signal value.

But if I move the same code inside a dialog, when opening the dialog the input shows no value. Calling the input value outside of input displays the value correctly.

The dialog is just an html dialog, opening it via ref on button click ”dialogRef.showModal()”

E.g

<div>{textInput()}</div> shows initial value ”3”
<input value={textInput()} … /> shows empty

<div>{textInput()}</div> shows initial value ”3”
<input value={textInput()} … /> shows empty

<div>{textInput()}</div> shows initial value ”3”
<input value={textInput()} … /> shows empty

<div>{textInput()}</div> shows initial value ”3”
<input value={textInput()} … /> shows empty

I can type a new value and it works after that but I’d like to have a default value that I know would be used most in my case so users don’t need to change this field in majority of cases

Any suggestions what could be wrong?

<input> has no value inside <dialog>

Similar Threads

Similar Threads

Similar Threads