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.

Dc

Hi, I think it would be helpful if you create an online example we can play around with. – Jeraldinejeralee

Why not just wrap the <paper-item> elements in an <a> tag instead of the other way around? – Finisterre

@Jeraldinejeralee good idea ;) I've added the url to the description. – Dc

@VartanSimonian that seems ugly. The item is the wrapper and a link should be optional. – Dc

@AlbertSkibinski, do what @vartan-simonian suggests and wrap it in an <a> tag. It's even the suggested approach from the docs: elements.polymer-project.org/elements/paper-item To use paper-item as a link, wrap it in an anchor tag. Since paper-item will already receive focus, you may want to prevent the anchor tag from receiving focus as well by setting its tabindex to -1. – Mulciber

@Mulciber Yeah that's definitely the suggested option, but it leaves some gaps. Firstly you have to style the anchor back to the original paper-icon-item. Then you have to add another class so the paper-icon-item bolds again because the anchor takes the .iron-selected class. Have you since found another method or is that still what you have to do? – Baronial

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);
    },
})();

Peal

Yes, that would be possible but doesn't that have a negative SEO impact? – Dc

For me adding an up-to-date sitemap.xml to your site route is the best way to go for any JavaScript site regardless of using links or not, which will allow any search engine to navigate your site. Those big search engines that execute JavaScript will have no issues and those that don't will probably not render any polymer stuff. And then there is the ugly way of CEO optimization - to just to add links with display:none, which will not interfere with your UI and will serve as normal links for search engines. But yeah that is a good point. – Peal

So, yes your answer is right but I still wonder if it's also the best practice for polymer paper-item links. Maybe it's obvious but I can't find anything about it in the documentation. Do you think they assume everybody is using JS or should this current behaviour be considered a bug? – Dc

Not sure, I'm still learning polymer, too :) If pushstate-anchor allow the is="pushstate-anchor" to other tags other than <a> tag. (github.com/erikringsmuth/pushstate-anchor/blob/master/src/…) they kind of hard-coded it. Then you can go without any JS (just adding the attribute directly to the paper-item element), but still I can't see <paper-item> being CEO friendly. – Peal

updated my original post with a link to an issue in the paper-item issue queue which I think addresses this issue. – Dc

So I've updated the live code (makes sure to clear browser cache) and removed the anchor tags, replacing it with js like you described. It works, but as you can see, the active states of the paper-item are not triggered... – Dc

I think the problem might be app-router which is not yet 100% compatible with the way polymer 1.0 works. If I compare the code with the starterkit code, there are some differences. The starterkit uses page.js for routing. However, I want to use de pushstate API which is not supported in the starterkit. – Dc

Native links have the advantage of extra features such as Ctrl+Click to open in new tab, and the browser native drop down menu. Faking links in javascript is a practice that needs to die. – Lajuanalake

Answer 2

Add class="flex" to each of your anchor tags.

Jeraldinejeralee

Adding this class doesn't solve the problem: it only makes the clickable arae of the link larger, but it does not set the active state. – Dc

It works for me, although the items still contain some padding. – Jeraldinejeralee