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

Question

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?

score 20 · Accepted Answer · edited Dec 20 '18 at 22:16

20

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 })

edited Dec 20 '18 at 22:16

Paul Fioravanti

16,423
7
71
122

answered Sep 27 '18 at 16:59

glennsl

28,186
12
57
75

This works if it is within an element that is not an `a`. As an `a` attribute, the Browser.application onUrlRequest acts before I can prevent it. – brendangibson Sep 27 '18 at 21:54

score 2 · Answer 2 · answered Jan 09 '19 at 06:35

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
            }
        )

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

2 Answers2