Skip to content

Trigger a Msg when user clicks outside of a given DOM element

License

Notifications You must be signed in to change notification settings

xarvh/elm-onclickoutside

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

elm-onclickoutside

This package uses tabindex and the focusout event to detect when a DOM element, or any of its children, lose focus.

This is useful for UX elements such as dropdowns and modals that should close whenever the user clicks outside of them.

import Html exposing (..)
import Html.Attributes exposing (class)
import Html.OnClickOutside


type Msg
    = UserClickedOutsideOfFruitDropdown


dropdownView =
    let
        onClickOutsideAttributes =
            Html.OnClickOutside.withId "fruit-dropdown" UserClickedOutsideOfFruitDropdown

        otherAttributes =
            [ class "generic-dropdown" ]

        allAttributes =
            onClickOutsideAttributes ++ otherAttributes
    in
        div
            allAttributes
            [ text "apples"
            , text "oranges"
            , text "pears"
            ]

About

Trigger a Msg when user clicks outside of a given DOM element

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages