I’m currently upgrading an app from 0.18 to 0.19 and noticed that the Browser
package doesn’t seem to handle navigation of a
tags w/o the href
element correctly. According to https://www.w3.org/TR/2016/REC-html51-20161101/links.html#element-attrdef-a-href the href
attribute is not required and when it is not present it does not create a hyperlink.
Is this a bug in the Browser
package? Below is an example program. You will notice that clicking the “test w/o href” a
element will result in a page reload even though there is no href
present.
module Main exposing (main)
import Browser exposing (Document, UrlRequest)
import Browser.Navigation as Nav
import Html exposing (Html, a, button, div, p, text)
import Html.Attributes exposing (href)
import Html.Events exposing (onClick)
import Json.Decode as Decode
import Url exposing (Url)
type alias Model =
{ internalCount : Int
, externalCount : Int
, navKey : Nav.Key
, url : Url
}
init : Decode.Value -> Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url navKey =
( { internalCount = 0, externalCount = 0, url = url, navKey = navKey }, Cmd.none )
type Msg
= UrlRequested UrlRequest
| UrlChanged Url
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
UrlRequested request ->
case Debug.log "request" request of
Browser.Internal url ->
( { model | internalCount = model.internalCount + 1 }, Nav.pushUrl model.navKey (Url.toString url) )
Browser.External href ->
( { model | externalCount = model.externalCount + 1 }, Nav.load href )
UrlChanged url ->
( { model | url = url }, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
view : Model -> Document Msg
view model =
{ title = "a tag w/o href"
, body =
[ div []
[ p []
[ text "Internal Count: "
, text <| String.fromInt model.internalCount
]
, p []
[ text "External Count: "
, text <| String.fromInt model.externalCount
]
, p [] [ a [ href "/test" ] [ text "test w/ href" ] ]
, p [] [ a [] [ text "test w/o href" ] ]
]
]
}
main : Program Decode.Value Model Msg
main =
Browser.application
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
, onUrlRequest = UrlRequested
, onUrlChange = UrlChanged
}