Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't I use `onWithOptions` in elm 0.19

Tags:

elm

I am attempting to upgrade an elm application from 0.18 to 0.19.

I am stuck with this error -

Detected errors in 1 module.                                         
-- BAD IMPORT ---------------------------------------- src/Views/Interaction.elm

The `Html.Events` module does not expose `onWithOptions`:

13| import Html.Events exposing (onWithOptions)
                                 ^^^^^^^^^^^^^
These names seem close though:

    onMouseEnter
    onMouseLeave
    onMouseOut
    onMouseOver

The documentation shows that onWithOptions should be available.

My code is

module Views.Interaction exposing (onClickNoBubble)

{-| Helper functions for page interactions.


# Helpers

@docs onClickNoBubble

-}

import Html
import Html.Events exposing (onWithOptions)
import Json.Decode as Decode


{-| Replicates the onClick function but prevents bubbling
-}
onClickNoBubble : msg -> Html.Attribute msg
onClickNoBubble message =
    onWithOptions "click" { stopPropagation = True, preventDefault = True } (Decode.succeed message)

How do I move forward?

like image 236
brendangibson Avatar asked Sep 27 '18 16:09

brendangibson


2 Answers

Elm 0.19 does not use elm-lang/html. You're reading the wrong documentation. It has been replaced by elm/html which has a custom function that serves the same purpose:

onClickNoBubble : msg -> Html.Attribute msg
onClickNoBubble message =
    Html.Events.custom "click" (Decode.succeed { message = message, stopPropagation = True, preventDefault = True })
like image 63
glennsl Avatar answered Nov 05 '22 04:11

glennsl


I made a little helper function to get this to work.

onCustomClick : msg -> Html.Attribute msg
onCustomClick msg =
    custom "click"
        (Decode.succeed
            { message = msg
            , stopPropagation = True
            , preventDefault = True
            }
        )
like image 31
Soham Dasgupta Avatar answered Nov 05 '22 03:11

Soham Dasgupta