What would be the right way to handle a click outside of a single component that is supposed to hide this component?
Example of such component might be a dropdown menu, a datepicker and the like. We typically expect them to hide when we click outside. But to do so, it seems like we have to perform some "impure" hacks that I'm not sure how to avoid in FRP style.
I searched for relevant React examples for ideas and found this but they all seem to rely on attaching callbacks to global objects that then modify internal component's state.
The existing answer doesn't work in elm v0.18 (Signal was removed in 0.17), so I wanted to update it. The idea is to add a top-level transparent backdrop behind the dropdown menu. This has the bonus effect of being able to darken everything behind the menu if you want.
This example model has a list of words, and any word may have a open dropdown (and some associated info), so I map across them to see if any of them are open, in which case I display the backdrop div in front of everything else:
There's a backdrop in the main view function:
view : Model -> Html Msg
view model =
div [] <|
[ viewWords model
] ++ backdropForDropdowns model
backdropForDropdowns : Model -> List (Html Msg)
backdropForDropdowns model =
let
dropdownIsOpen model_ =
List.any (isJust << .menuMaybe) model.words
isJust m =
case m of
Just _ -> True
Nothing -> False
in
if dropdownIsOpen model then
[div [class "backdrop", onClick CloseDropdowns] []]
else
[]
CloseDropdowns is handled in the app's top-level update function:
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
CloseDropdowns ->
let
newWords = List.map (\word -> { word | menuMaybe = Nothing } ) model.words
in
({model | words = newWords}, Cmd.none)
And styled things using scss:
.popup {
z-index: 100;
position: absolute;
box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, .2);
}
.backdrop {
z-index: 50;
position: absolute;
background-color: rgba(0, 0, 0, .4);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
The following example that does something similar to what you describe.
modal is presented with an address (to send a 'dismiss' event to), the current window dimensions, and an elm-html Html component (which is the thing to be focussed, like a datepicker or a form).
We attach a click handler to the surrounding element; having given it an appropriate id we can work out if received clicks apply to it or the child, and forward them on appropriately. The only really clever bit is the deployment of customDecoder to filter out clicks on the child element.
Elsewhere, on reception of the 'dismiss' event, our model state changes such that we no longer need to call modal.
This is quite a large code sample that makes use of a fair few elm packages, so please ask if anything requires further explanation
import Styles exposing (..)
import Html exposing (Attribute, Html, button, div, text)
import Html.Attributes as Attr exposing (style)
import Html.Events exposing (on, onWithOptions, Options)
import Json.Decode as J exposing (Decoder, (:=))
import Result
import Signal exposing (Message)
modal : (Signal.Address ()) -> (Int, Int) -> Html -> Html
modal addr size content =
let modalId = "modal"
cancel = targetWithId (\_ -> Signal.message addr ()) "click" modalId
flexCss = [ ("display", "flex")
, ("align-items", "center")
, ("justify-content", "center")
, ("text-align", "center")
]
in div (
cancel :: (Attr.id modalId) :: [style (flexCss ++ absolute ++ dimensions size)]
) [content]
targetId : Decoder String
targetId = ("target" := ("id" := J.string))
isTargetId : String -> Decoder Bool
isTargetId id = J.customDecoder targetId (\eyed -> if eyed == id then Result.Ok True else Result.Err "nope!")
targetWithId : (Bool -> Message) -> String -> String -> Attribute
targetWithId msg event id = onWithOptions event stopEverything (isTargetId id) msg
stopEverything = (Options True True)
A bit late to the party here, but I was struggling with exactly the same problem and the elm community on slack suggested a nice way of detecting click outside an element (let's say, a dropdown).
The idea is that you can attach a global listener to mousedown via BrowserEvents.onMouseDown and pass it a custom decoder that would decode target DOM node from the event object. By "decoding DOM node" I mean decoding only the id and parentNode properties of the node. parentNode will allow recursively travers the DOM tree and for each node check whether its id is the same as the id of the dropdown.
The code for this (in elm 0.19) looks like this:
-- the result answers the question: is the node outside of the dropdown?
isOutsideDropdown : String -> Decode.Decoder Bool
isOutsideDropdown dropdownId =
Decode.oneOf
[ Decode.field "id" Decode.string
|> Decode.andThen
(\id ->
if dropdownId == id then
-- found match by id
Decode.succeed False
else
-- try next decoder
Decode.fail "continue"
)
, Decode.lazy
(\_ -> isOutsideDropdown dropdownId |> Decode.field "parentNode")
-- fallback if all previous decoders failed
, Decode.succeed True
]
-- sends message Close if target is outside the dropdown
outsideTarget : String -> Decode.Decoder Msg
outsideTarget dropdownId =
Decode.field "target" (isOutsideDropdown "dropdown")
|> Decode.andThen
(\isOutside ->
if isOutside then
Decode.succeed Close
else
Decode.fail "inside dropdown"
)
-- subscribes to the global mousedown
subscriptions : Model -> Sub Msg
subscriptions _ =
Browser.Events.onMouseDown (outsideTarget "dropdown")
The code uses Json-Decode package that needs to be installed via elm install elm/json.
I also wrote an article explaining in details how this works, and have an example of a dropdown on github.
Related
I am trying to access an elements HTML properties when clicked. I figured out that Events.onClick will only return event.target.value and I need to use Events.on to handle custom behaviours.
What I need is: when click on a div I should be able to access its HTML properties, for now id and name and send this value to update with some message.
I tried like this:
onClickData : msg -> Attribute msg
onClickData handler =
on "click" (Decode.succeed handler )
---
view: ...
....
div[onClickData HandleClick] []
This way i am able to trigger HandleClick action when the div is clicked but cannot access its HTML properties.
As #glennsl has noted, you normally would want to do something more like this:
view identification =
button [ id identification, onClick (MyMsg identification) ]
[ text "Click me"
]
i.e. you can pass data straight into your Msg type.
That said, there are some unusual inter-op situations where you might want to do this. The general principle is that you can get the element that you bound your event handler to from event.currentTarget, so you can use the following decoder:
decodeProperty : String -> Decoder a -> Decoder a
decodeProperty property decoder =
Decode.at ["currentTarget", property] decoder
--- use
onClickId : (String -> msg) -> Attribute msg
onClickId tagger =
on "click" (Decode.map tagger (decodeProperty "id"))
How do I get the caption from a button?
decorateOn : String -> Html Msg -> Html Msg
decorateOn selectedCaption button =
if button.text == selectedCaption then
button [ class "selectedNavigationButton" ] []
else
button [ class "navigationButton" ] []
button does not have a field named text. - The type of button
is:
Html Home.Msg
Which does not contain a field named text.
Note, I realize that the "button" is really of type Html Msg.
You need to turn your thinking on its head. Rather than seeing what is in the button text, you need to set the text at the same stage as setting the class. So that gives you something like
decorateOn : String -> Html Msg -> Html Msg
decorateOn selectedCaption button =
if selectedCaption == "the selected value" then
button [ class "selectedNavigationButton" ] [text selectedCaption ]
else
button [ class "navigationButton" ] [text selectedCaption]
You can't get the text from a button without resorting to hacks involving ports and JavaScript. Moreover, you can't really inspect anything about the Elm Virtual DOM from within Elm.
Instead, try to refactor your app so that you can get the information from your model.
I know how to listen for tab key presses in Elm. And I know how to stop the focus from being changed using onWithOptions:
textarea
[ onWithOptions "keydown" (Options False True) <| Decode.map KeyDown keyCode ] []
I can then check, in my update function, if the keyCode pressed was a 9, representing a tab. The problem is now the default behavior of a textarea doesn't work. Anything I type doesn't appear in the textarea. Easy enough, I simply add whatever I type to the model and make the value of the textarea the model. Now I have issues with the cursor and, more importantly, clipboard pasting doesn't work...
How do I get tabs to work properly with textareas in Elm? Normally, it would seem to make sense to only call preventDefault() if the tab key was pressed. How can I conditionally call preventDefault() in Elm?
Elm does support conditional event propagation through a Decoder that either succeeds or fails. Simply map the message type you want to react to in your update function:
succeededIfTabKey : Int -> Decode.Decoder Int
succeededIfTabKey key =
if key == 9 then
Decode.succeed key
else
Decode.fail "non-tab"
tabPressed : Decode.Decoder Msg
tabPressed =
Decode.andThen succeededIfTabKey keyCode
|> Decode.map (always TabPressed)
And then use this as your attribute for your input element:
onWithOptions "keydown" { defaultOptions | preventDefault = True } tabPressed
This isn't ideal for all situations. If you want some keydown events to not preventDefault(), and other keydown events to preventDefault(), then you're out of luck.
I am fairly new in Elm. I am currently discovering that language while experimenting it. Although the use of signals appears complex. Here below is a working example of my webpage, which handles multiple paragraphs (addition, removal, edition, ...) .
-- start
main: Signal Html.Html
main = Signal.map (view actions.address) model
view: (Signal.Address Action) -> Model -> Html
view address model = ... (displaying paragraphs with buttons, ect)
This snippet initiates the model. By mapping the actions to the model using Signal.map, i am able to handle click events from buttons (imported Html + Event module)
model: Signal Model
model = Signal.foldp update makeEmptyModel actions.signal
Here, i start with an empty model. The update function allows me to update the model after click events on buttons.
update: Action -> Model -> Model
update action model = ....
The Action is a type which handles multiple actions that i have defined like "AddParagraph", "RemoveParagraph" ...
This works so far. Now, when checking the packages, i found Keyboard. That appears interesting, so I want to add a new functionality. If the user presses Alt+A, all paragraphs got selected. (Like Ctrl+A in file explorer)
But it appears that it's not easy to combine that with the current signal mapping that I have. I decided to dig into Signal and found Signal.merge. So i can use it right ? My attempt to merge the keyboard signal to my current signals is
main = Signal.merge
(Signal.map (view actions.address) model)
(Signal.map (view actions.address) keysDown)
(the keysDown is from import Keyboard exposing (keysDown) import)
But that doesn't work. I get the next error
The 2nd argument to function `map` is causing a mismatch.
160│ Signal.map (view actions.address) keysDown)
^^^^^^^^
Function `map` is expecting the 2nd argument to be:
Signal { focused : Bool, selected : Bool, ... }
But it is:
Signal (Set.Set Char.KeyCode)
It appears that when using Signal.merge, it expects multiple signals which handles the same output. Well that's what i want. But that doesn't work it seems.
Question: How can i add Keyboard signal to the current design ?
Or am I wrong with my expectations about Signal.merge ? That I'm using Signal.merge for wrong purpose ? Should I use Signal.map2 instead ? If so, how can I use it with my current example* ? Or is there a better approach ?
if the solution is map2, can you add an explanation ? That is because I don't understand that "map2" stuff
The Signals you send to merge must be of the same type. You'll need to add another function that maps the keyboard input to an Action prior to merging.
There are a couple ways to achieve this. Here's an example using the basic Counter examples and Signal.merge. Of importance is the use of the keyPressesToAction signal mapping function
import Signal
import Html exposing (..)
import Html.Events exposing (..)
import Keyboard
import Char
type Action = NoOp | Increment | Decrement
actions : Signal.Mailbox Action
actions =
Signal.mailbox NoOp
update action model =
case action of
NoOp -> model
Increment -> model + 1
Decrement -> model - 1
model =
Signal.foldp update 0 (Signal.merge actions.signal keyPressesToAction)
keyPressesToAction =
let
keyCodeToAction keyCode =
case Char.fromCode keyCode of
'+' -> Increment
'-' -> Decrement
_ -> NoOp
in
Signal.map keyCodeToAction Keyboard.presses
main =
Signal.map (view actions.address) model
view address model =
div []
[ button [ onClick address Decrement ] [ text "-" ]
, text <| toString model
, button [ onClick address Increment ] [ text "+" ]
]
Another way to achieve the desired results is by using a port dedicated to converting key presses to action signals. This gets rid of the need to merge signals because it instead causes key presses to trigger the Mailbox you've already set up.
In this scenario, the model function goes back to the way it was, then we add the port below called triggerActionOnKeyPress, which uses the identical keyPressesToAction signal mapping function from above. Here are the relevant lines:
model =
Signal.foldp update 0 actions.signal
port triggerActionOnKeyPress : Signal (Task.Task Effects.Never ())
port triggerActionOnKeyPress =
Signal.map (Signal.send actions.address) keyPressesToAction
This is the view snippet taken from elm checkbox examples -
view address model =
div [] <|
span [toStyle model] [text "Hello, how are yo?"]
:: br [] []
:: checkbox address model.red Red "red"
++ checkbox address model.underline Underline "underline"
++ checkbox address model.bold Bold "bold"
checkbox : Address Action -> Bool -> (Bool -> Action) -> String -> List Html
checkbox address isChecked tag name =
[ input
[ type' "checkbox"
, checked isChecked
, on "change" targetChecked (Signal.message address << tag)
]
[]
, text name
, br [] []
]
1) I understand, double colons and double plus are for concatenating lists? How are they different from each other?
2) In the checkbox function in this line, (Signal.message address << tag), what does tag unbind to? Is it Red (or) red? What is this argument used for?
3) What is the type of argument does the address function take?
Answer
double colon (::) adds a single element to the start of a list.
double plus (++) concatenates two lists.
tag would be equal to Red in the when checkbox is called from checkbox address model.red Red "red". Red is a function from Bool to Action. It wraps the event of the check box in this data constructor so that later in the update function, you can distinguish the event of that check box from the events of the other check boxes.
address is not a function. It has type Address Action, meaning it holds the address of a mailbox that can receive Action messages. This "mailbox" is not visible in the code, it's used internally by StartApp, which is used in the main function.
Code references
To keep this question useful even if the linked example changes, these are the relevant code portions I'm referring to:
The update function:
update action model =
case action of
Red bool ->
{ model | red <- bool }
Underline bool ->
{ model | underline <- bool }
Bold bool ->
{ model | bold <- bool }
The Action type:
type Action
= Red Bool
| Underline Bool
| Bold Bool
The main function:
main =
StartApp.start { model = initialModel, view = view, update = update }