Elm focusout focusin

Example.elm

import Browser.Dom
import Element exposing (Element)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
import Html
import Html.Attributes
import Html.Events
import Json.Decode as Decode
import Json.Encode as Encode



decodeAncestorProperty : Decode.Decoder p -> Decode.Decoder (List p)
decodeAncestorProperty decoder =
    Decode.oneOf
        [ decoder |> Decode.map (\p -> [ p ])
        , Decode.succeed []
        ]
        |> Decode.andThen
            (\ps ->
                Decode.oneOf
                    [ Decode.at [ "parentNode" ] (decodeAncestorProperty decoder)
                        |> Decode.andThen (\parents -> Decode.succeed (ps ++ parents))
                    , Decode.succeed ps
                    ]
            )


decodeGroupIdChanged : (String -> msg) -> Decode.Decoder msg
decodeGroupIdChanged msg =
    Decode.map2
        (\a b ->
            if List.head a /= List.head b then
                List.head a

            else
                Nothing
        )
        (Decode.at [ "target" ] <|
            decodeAncestorProperty (Decode.at [ "dataset", "groupId" ] Decode.string)
        )
        (Decode.at [ "relatedTarget" ] <|
            decodeAncestorProperty (Decode.at [ "dataset", "groupId" ] Decode.string)
        )
        |> Decode.andThen
            (\maybeChanged ->
                case maybeChanged of
                    Just a ->
                        Decode.succeed (msg a)

                    Nothing ->
                        Decode.fail "no change"
            )


onGroupFocusOut : (String -> msg) -> Element.Attribute msg
onGroupFocusOut msg =
    Element.htmlAttribute <|
        Html.Events.on "focusout" (decodeGroupIdChanged msg)


onGroupFocusIn : (String -> msg) -> Element.Attribute msg
onGroupFocusIn msg =
    Element.htmlAttribute <|
        Html.Events.on "focusin" (decodeGroupIdChanged msg)


groupIdAttribute : String -> Element.Attribute msg
groupIdAttribute groupId =
    Element.htmlAttribute <| Html.Attributes.attribute "data-group-id" groupId
    
--app.ports.blur.subscribe(function(){
--    try {
--        document.activeElement.blur();
--    } catch (error) {
--        //skip
--    }
--});
    
port blur : () -> Cmd msg