link in paper-item: avoid capturing tap

Question

I display one of a set of pages based on the url using app-location, and I also have a paper-listbox containing a list of paper-items, displaying the list of available pages. Each paper-item has a link inside that goes to that page. If the link is clicked normally, the request is intercepted by app-location and the page is displayed without a reload. If the link is Ctrl+clicked or middle clicked or whatever, it opens the page in a new tab, like normal links do.

My question - how can I keep the selection in the listbox in sync with the page being displayed? I've tried everything I could think of, but nothing quite works.

Without any extra logic, the links work, but clicking on the paper-item selects it, even though the page displayed doesn't change. I tried adding an observer on the listbox's selected attribute and updating the url as appropriate. That mostly works with one exception - Ctrl + clicking the link to open in a new tab still causes the paper-item to be selected, and hence the existing tab to change as well.

I also tried wrapping the entire paper-item inside the link, but that didn't help at all.

Is there any way to solve this? It seems like the only solution is to find a way to stop paper-item from capturing the tap event when it occurs on a child link. But I can't find any way to do that without modifying the Polymer source code itself, which is out of the question.

Answer 1

I came up with an example which uses iron-selector along with some css to show how this could be done. And then the magic comes with having an event on your anchor element which checks if ctrl is pressed and if it is, it stops the event from propagating down, which prevents focusing on the item.

_onClick: function(e) {
    if (e.ctrlKey) {
      console.log('stop propagation');
      e.stopPropagation();
    }
}

plunkr

Note, this also works when right-clicking and choosing to open a new tab from link, as focus is not passed to the item.

Also, I know this doesn't use paper-item component. I tried the same technique but it didn't work, it always seemed to grab focus.