Dans Elm, comment puis-je détecter si la mise au point sera perdue à partir d'un groupe d'éléments ?

Question

Supposons que j'ai un formulaire avec un certain nombre de composants. J'aimerais détecter une perte de focus du groupe . Ainsi, la mise au point d'une entrée à une autre sur le même formulaire doit être ignorée. Comment puis-je réaliser cela ?

Answer 1

Tout d'abord, nous voulons être en mesure de marquer chaque élément focalisable au sein du groupe avec un attribut, de sorte que lorsque nous changeons d'élément, nous sachions si nous sommes dans le même groupe ou non. Cela peut être réalisé avec des attributs de données.

groupIdAttribute groupId =
    Html.Attributes.attribute "data-group-id" groupId

Ensuite, nous devons décoder la charge utile de l'événement sur un fichier onBlur pour voir si le target est différente de la relatedTarget (ce qui fera l'objet d'une attention particulière). Et signalez le changement. (notez qu'ici nous faisons référence à data-group-id via le chemin "dataset", "groupId" )

decodeGroupIdChanged msg =
    Json.Decode.oneOf
        [ Json.Decode.map2
            (\a b ->
                if a /= b then
                    Just a

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

                    Nothing ->
                        Json.Decode.fail "no change"
            ) 

Maintenant, nous pouvons créer un onGroupLoss écouteur :

onGroupFocusLoss msg =
    Html.Events.on "blur" (decodeGroupIdChanged msg)

Et faites comme ça :

input [onGroupFocusLoss GroupFocusLoss, groupIdAttribute "a"]

Voici un exemple (notez qu'il est construit avec elm-ui donc il y a un peu de code supplémentaire).

https://ellie-app.com/3nkBCXJqjQTa1