Checkbox "checked" value un-toggled before event handler is triggered

If you have the following code:

Html.div
   [ Events.stopPropagationOn  "click" (Json.Decode.succeed ( NoOp, True )) ]
   [ Html.input
      [ Events.type_ "checkbox"
      , Events.onCheck Toggle
      , Events.checked model.isChecked
      ]
      []
   ]

the checkbox will not toggle.

The interesting part is that if you remove the checked model.on, it works again. The theory is that NoOp gets triggered (synchronously), re-renders the DOM, overwriting the newly checked value, before the Toggle event handler is triggered. Because Toggle uses the checked value for the boolean it sends with the message, it sends the wrong boolean, since the checked value was flipped back by the NoOp render.

A possible work around just to ignored the checked value from onCheck and just toggle your model directly.

Events.onCheck (\_ -> Toggle (not model.isChecked))

See ellie example.

elm / virtual-dom

Checkbox "checked" value un-toggled before event handler is triggered #149