Paper-items with child elements require two clicks to select in Firefox

[mgiuffrida]

In Firefox, I find that I frequently have to double-click paper-items inside a paper-menu if the paper-item has children other than text. The first click activates the element the same way the arrow keys do, but the second click is required to actually select the element.

<paper-menu>
  <paper-item>
    Click me once
  </paper-item>
  <paper-item>
    Click me once also
  </paper-item>
  <paper-item>
    <div>You have to click me twice</div>
  </paper-item>
  <paper-item>
    <div>Me too</div>
  </paper-item>
</paper-menu>

[realistschuckle]

This also happens in Safari.

[cnbuff410]

/sub, happens on Safari and Firefox on my side too.

[hawkett]

Here's a JSBin

You can see this visually in the demo - to reproduce:

1. Use Safari!
2. Click the top menu item - note that selected item has both bold and background highlight
3. Click the bottom menu item
4. Click the top menu item again - note that the top item has the background highlight, but is not bold. The top item must be clicked a second time to reach the correct selected state.

[notwaldorf]

I think the problem is whether you click on the child or the paper-item itself. It's much easier to reproduce by:

• clicking far away from the text (counts as a selection; this will change the background and bold the text)
• highlighting the text in the item (does not count as a selection; this will change the background, but not bold the text)

Bleh. @cdata

[notwaldorf]

Also paging in @azakus in case this is a gestures bug

[hawkett]

It seems like there's some state sticking around after they are first selected. First click on any item works fine. Subsequent attempts to click exhibit problem of requiring two clicks. The background highlight that does appear on the first click appears to be a focus related thing (i.e. the item gets focus, but doesn't select). Is there something going on in the focus handling that prevents the event bubbling perhaps?

[dfreedm]

It doesn't look like the click event is actually occurring when the selection changes. This leads me to believe there may be something going on with event creation, like what @hawkett suggests.

[dfreedm]

It's our stylings :( http://jsbin.com/licufenisi/edit?html,css,console,output

[tehapo]

Found a workaround for this issue by declaring pointer-events: none for the child elements.

For example:

<paper-item>
  <iron-icon icon="home"></iron-icon>
  <span>Home</span>
</paper-item>

paper-item iron-icon,
paper-item span {
    pointer-events: none;
}

[hawkett]

Confirmed! thx @tehapo. Would it make sense for paper-item to transparently style its children like this?

[notwaldorf]

Duplicate of PolymerElements/paper-behaviors#34

[Compufreak345]

@notwaldorf PolymerElements/paper-behaviors#34 is marked as fixed, however I still experience this issue with paper-menu. You can see it here (updated the example from @hawkett to work with the current Polymer version).

[kritollm]

Experienced exactly the same thing myself, had to click twice in safari. Fortunately style = "pointer-events: none;" fixed the problem:

 <a data-route="home" href="/" on-click="onDataRouteClick" style="position:relative">
          <iron-icon style="pointer-events: none;" icon="home"></iron-icon>
          <span style="pointer-events: none;">Home</span>
          <paper-ripple>
          </paper-ripple>
  </a>

[gstroup]

@notwaldorf
I don't think this issue is fixed. I just pulled down paper-elements 1.0.5, but I still see the same buggy behavior in Firefox. When I apply the style "pointer-events: none" in my application as suggested by @kritollm, then the problem is fixed. Can we reopen this one?

[notwaldorf]

@gstroup Here is a jsbin with the latest versions of all the elements, and the original code that had the problem. Everything looks fine in Firefox: http://jsbin.com/hayivi/edit?html,output

paper-elements 1.0.5 is from August, and probably doesn't have all the latest dependencies . In particular, it has a broken paper-behaviors import, where the fix exists.

[gstroup]

@notwaldorf
Thanks for the info. I meant to grab 1.0.6, not 1.0.5 version of paper-elements. Either way, it doesn't include that latest fix for the paper-behaviors import that was just made 2 days ago. But thank you, now I understand the problem!

[notwaldorf]

@gstroup Oh, just released 1.0.7 then.

[gstroup]

@notwaldorf Nice!! Thank you.

[abdonrd]

@notwaldorf I tried your last jsbin in Safari and it doesn't works.
When I click in the text, I always need the second click.

[flafuente]

@abdonrd same problem here. Any update on this? Thanks.

[abdonrd]

@flafuente no news for now. :/

[jakemac53]

@notwaldorf In the latest jsbin it looks like there are still issues when you click on the text of the menu items. If you click outside the text then it works fine.

[bicknellr]

@jakemac53 Just tagged a new release, should be working now. (polygit doesn't update immediately so you'll have to use //polygit.org/paper-menu+v1.2.2/components/ to see it.)

[jakemac53]

@bicknellr great seems to be working in FF

[abdonrd]

Thanks @bicknellr!