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.
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"))
In my app the user can click on a div to highlight it. Is there a way to detect that they've clicked somewhere away from the div? I'd like to unhighlight selected things when this happens. I tried adding an onclick to the big div that contains everything else, but that doesn't really work as desired. IIRC the big div onclick always happens after the contained div onclick, so you can't ever select anything.
You can do this by adding a on "click" event to both the divs and then in the inner div, use onWithOptions to stop the propagation of the event. Here's some (untested) code:
onClickStop msg =
onWithOptions "click"
{ stopPropagation = True, preventDefault = False }
(Json.succeed msg)
view _ =
div [ onClick Clicked ]
[ div [ onClickStop NoOp ] []
]
When the user clicks inside the nested div, the event will be ignored and its propagation to its parent will be cancelled. Only when the user clicks outside the inner div will the Clicked message will be sent to update.
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 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
I have a strange bug when I use an input field on a sweet alert I can't have the cursor inside my input field here is a jsfiddle.
https://jsfiddle.net/gvzwu5st/
If I include
showConfirmButton: false
Then it works fine here is the fiddle
https://jsfiddle.net/16L4sddt/
When you have showConfirmButton: true, the openModal() function (line 653) gives focus to the confirm button (line 662):
$okButton.focus();
When you try to click in the input field, the handleOnBlur() function (line 396) is called because the confirm button loses the focus. The functions defines the $targetElement variable which refers to the confirm button (line 397). Skipping some lines... the function will loop through each button of the modal to check if it is the element that got the focus. In your case, the target element is the input field, so it is not any of the buttons. The variable btnIndex keeps the value -1. Lines 413-416:
if (btnIndex === -1) {
// Something in the dom, but not a visible button. Focus back on the button.
$targetElement.focus();
}
So the confirm button ($targetElement) is given back the focus, which prevents the input field from ever receiving it.