<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
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?
2 Replies
oke
oke4d ago
Would you be able to make a minial reproduction ?
Sawyoh
SawyohOP2d ago
Changed the implementation to use table and have it render with default rows and then use add/delete button for inserting / deleting rows, working now so continuing with this. This is more accessible as well with clear add / delete actions

Did you find this page helpful?