9

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?

2 Answers 2

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 })
1
  • 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. Sep 27, 2018 at 21:54
2

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.