Anchor element children click target area.

[jackeown]

This issue is really annoying me. A menu with links is a fairly common use case and as such I hope this gets fixed soon. I'm just posting a link to the issue on the old repo so you guys are aware that it's still not fixed.

googlearchive/paper-item#14

[craftgear]

I found a workaround on paper-menu issues.

googlearchive/paper-menu#22 (comment)

On the Stackoverflow post a user named sensor shows how to use 'on-tap' to detect tappings/clickings.

So the following code would mitigate the pain a bit.

  <paper-menu>
    <paper-item on-tap="onSelect"><a href="/">TOP</a></paper-item>
  </paper-menu>

  <script>
    Polymer({
      onSelect: function(e){
        var link = e.currentTarget.querySelector('a');
        if(link) {
         link.click();
       }
      }
    });
  </script>

But honestly, this is ugly.
It destorys the beauty of "There is always an element."

And I can't understand why Polymer dev team doesn't include paper-item with a tags in any demos whatoever.

Maybe they tried it and know it doesn't work so avoid using them together? idk.

[Miliooo]

I ran into the same problem, this is really holding me back...

[craftgear]

@Miliooo I'd like to recommend you to look at Riot.JS + Material Design Lite.
IMHO, it's much more productive and pragmatic at this point of time.

Though I think I still keep watching how Polymer evolves.

[rubenstolk]

In general this issue is big, any element within paper-item cannot have their own on-tap listeners, simply overruled by the focus event of the paper-item or whatever.

[mcarey1590]

I have found this is due to the absolute position applied to the :before of paper-item that gives the focused/selected visual background. One way to solve this is to override the positioning using the mixin --paper-item-focused-before. A proper fix needs to be put into place though.

[ronnyroeller]

+1

[morficus]

+1

[bicknellr]

Why not just wrap the paper-item with the link? (demo)

[abdonrd]

Similar discussion here: PolymerElements/paper-button#35 (comment).

[eximius313]

+1

[Nemo64]

Why is it, that all these paper item/button etc elements can't just receive a href as an attribute. It would make everything so much easier. Allows correct coloring inside the element etc.

[eximius313]

yup, would be great...

[MarcMouallem]

If it helps anyone I am doing something like this to at least get the styling to work.

/* HACK: Makes <a> work with <paper-item> selected item styling.
 * https://github.com/PolymerElements/iron-elements/issues/37*/
a.iron-selected paper-item,
a.iron-selected paper-icon-item{
  font-weight: bold;
}
/* HACK: Makes <a> work with <paper-item> selected item styling.
 * https://github.com/PolymerElements/iron-elements/issues/37*/
a:focus {
  outline: none;
}
/* HACK: Makes <a> work with <paper-item> focus styling.
 * https://github.com/PolymerElements/iron-elements/issues/37 */
a:focus paper-item:before,
a:focus paper-icon-item:before {
  @apply(--layout-fit);
  background: currentColor;
  content: '';
  opacity: var(--dark-divider-opacity);
}

P.S. <a> must wrap <paper-item> and not the other way around so that the entire item, including any icons, is part of the "hit" area. Also, implementing the same functionality imperatively would cause the app to lose out on all the cool browser anchor tag features such as open in new tab.