stopPropagation breaks onCheck value

[harmboschloo]

Set up: A checkbox element with onCheck, and a parent element with onClick and stopPropagation.

Expected behaviour: When you click/change the checkbox the Checked message contains the new checked value.

Actual behaviour: The Checked message contains the old checked value. Hence the checked value never changes.

In the code below when you change stopPropagationOn to ( Clicked, False ) the checkbox works as expected. But with ( Clicked, True ) the checkbox never changes (with mouse or keyboard).

This is also the case when onClick and stopPropagation is defined on the checkbox element.

SSCCE:

module Main exposing (main)

import Browser
import Html
import Html.Attributes
import Html.Events
import Json.Decode


type Msg
    = Checked Bool
    | Clicked


main : Program () Bool Msg
main =
    Browser.sandbox
        { init = False
        , update =
            \msg checked ->
                case msg of
                    Checked newChecked ->
                        newChecked

                    Clicked ->
                        checked
        , view =
            \checked ->
                Html.div
                    [ Html.Events.stopPropagationOn
                        "click"
                        (Json.Decode.succeed ( Clicked, True ))
                    ]
                    [ Html.input
                        [ Html.Attributes.type_ "checkbox"
                        , Html.Attributes.checked checked
                        , Html.Events.onCheck Checked
                        ]
                        []
                    ]
        }