Link in paper-item inside paper-menu-button (Polymer-1.0)

Question

update 1: found this issue with pull request which seems to be addressing this issue in Polymer.

update 2: Decided to restructure my layout based on the Polymer Starter Kit which uses page.js instead of app-router, and seems to work well, although they don't use paper-item in paper-menu but instead use custom anchor elements.

Search every bit of documentation but I can't find this (although there is another issue on stackoverflow with almost the same title, not same thing)

TLDR: I need to have to whole paper-item clickable to the link. Not just the text itself. See image below for clarity and here is the live code.

.

I've got something like the code below. I'm using link tags in combination with app-router routing which works great. The only problem is: I would like to have have the entire paper-menu-item to be clickable with the link tag.

When I use below code, the right page is retrieved when clicking directly on the link tekst itself, but that doesn't create a "selected" state. When I click on the button (just off the text) then the button IS selected but the page isn't retrieved because I didn't click the link...

There must be an easy way to do this right? I mean, I could force this by overriding all the CSS but it seems to me a link in a paper-item in a paper-menu would be a very common thing which should do this automatically or with an attribute or someting?

<paper-menu class="list">
  <paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
  <paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>

I checked documentation on paper-item, paper-menu and others but those never use an example with a link.

Answer 1

IMO, the most clean way is to just drop the links altogether and just add on-tap event.

(You can also use dom-repeat for your menu)

<paper-menu class="list">
  <paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
  <paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>

I'm assuming your are using <a> tags because of app-router.

From app-router doc:

go(path, options) - You can call the router from Javascript to navigate imperatively.

Then you can simple write your own on-tab handler and use custom attribute (mypath) on each <paper-item>

Polymer({
    is: 'your-menu',
    menuSelected: function (e) {
        var mypath = e.currentTarget.getAttribute('mypath'); 
        document.querySelector('app-router').go(mypath);
    },
})();