a tags without href generate a navigation event

[sporto]

When using Browser.application. If you have an a which doesn't have an href, Elm will generate a navigation event.

Reproduction here: https://github.com/sporto/repro-elm-application-a-tag/blob/master/src/Main.elm

This seems like a bug, a tag is not supposed to be a link unless it has a href.

https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents.

[ChristophP]

A good example for that is an in-page-anchor.

<a href="#someAnchor">Click here to jump to anchor</a>

<!-- An anchor on the page without href -->
<a name="someAnchor"></a>

[Pilatch]

@sporto If you want to test all sorts of behaviors out, I recommend this gist https://gist.github.com/Pilatch/c1b6e5d925c6479a0b2e53892fa2dca3

I have discovered the culprit, and it's not in elm/browser. It's in elm/virtual-dom.

Pull request created for the fix - elm/virtual-dom#142

[domenkozar]

For the record, it maps to External ""

[Fresheyeball]

for anyone here looking to get past this thing. The following delivers the desired behavior

onClickAnchor :: msg -> List (Attribute msg)
onClickAnchor msg = [ preventDefaultOn "click" <| Json.succeed (msg,True), href "#" ]

[ChristophP]

Just ran into this again. The current behavior is really bad. It basically makes using in page anchor's useless with Browser.application, because you don't want the page to reload there. It would be such an easy fix to just exclude links without an href attribute from the special treatment.

[pruchay]

for anyone here looking to get past this thing. The following delivers the desired behavior

onClickAnchor :: msg -> List (Attribute msg)
onClickAnchor msg = [ preventDefaultOn "click" <| Json.succeed (msg,True), href "#" ]

How to use it? Could you please share an example?