HTML input value is not reflected on the view

It seems the value attribute of an input field is not correctly reflected on the view when the model changes.

case class Model(input: String)

input(`type` := "text", attribute("value", model.input))

The input field is updated either on Msg.SymbolChanged or reset (input = "") on Msg.Subscribe.

// view
input(`type` := "text", attribute("value", model.input), onInput(s => Msg.SymbolChanged(s)))

// update
case Msg.SymbolChanged(in) =>
  model.copy(input = in) -> Cmd.Empty

case Msg.Subscribe =>
  val nm  = model.copy(input = "")
  val cmd = model.ws.map(ws => Cmd.Batch(ws.publish(WsIn.Subscribe.asJson.noSpaces), refocusInput))
  nm -> cmd.getOrElse(Cmd.Empty)

Everytime the model is updated in the first message, I can see the HTML input value is updated (seeing this by inspecting the element in the browser). However, when the Subscribe message is handled and the input in the model is reset, the value attribute is properly reset as well, but the view remains with the previous value.

Here’s an example from the trading application, right after clicking subscribe, where I first noticed the issue.

The value attribute is reset but the view still shows the previously entered value “CHFEUR”. I’d expect the input field to be cleared up as well.

[aumann]

For future reference, if there should be more issues, an entry level explanation of attributes vs DOM properties: https://stackoverflow.com/a/6004028/14188171

[davesmith00000]

https://github.com/elm/html/blob/master/properties-vs-attributes.md 😭