search

PolymerElements / paper-icon-button

A Material Design icon button
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
42 stars 44 forks source link

paper-menu-button Bug on tap #35

Closed tjsavage closed 9 years ago

tjsavage commented 9 years ago

From @summers173 on August 17, 2015 18:7

Sometimes (not always) when in the documentation example

<paper-menu-button>
  <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
  <paper-menu class="dropdown-content">
    <paper-item>Share</paper-item>
    <paper-item>Settings</paper-item>
    <paper-item>Help</paper-item>
  </paper-menu>
</paper-menu-button>

when you tap on paper-icon-button (mobile and desktop) the ink expands but the menu does not open, you have to click right in the middle in order to the event propagate, and sometimes this don't even work.

Thanks in advanced

Copied from original issue: Polymer/polymer#2289

kungufli commented 9 years ago

+1 same issue here.

dfreedm commented 9 years ago

Can you point me to the exact URL you're talking about? I can't reproduce this with the given example.

dfreedm commented 9 years ago

I also can't reproduce this behavior in the paper-menu-button demo at https://elements.polymer-project.org/bower_components/paper-menu-button/demo/index.html.

kungufli commented 9 years ago

In the end I discovered that the paper-menu-button have three (3!) different behaviors depending on where you tap on the screen. (All the records were made from the demo page https://elements.polymer-project.org/bower_components/paper-menu-button/demo/index.html with Chrome 45).

Tap exactly on the paper-icon-button (the menu is opened correctly): paper-menu-button Tap slightly out (but not so much) of the paper-icon-button (the menu is opened and immediately self-closed): paper-menu-button2 Tap near the edge of the element (the menu is not opened at all): paper-menu-button3

summers173 commented 9 years ago

@kungufli, great way to point the issue. The button don't behave as supposed to, I found another issue on the paper-menu-button, the scroll on items not always work if the paper-menu-button is render inside a paper-dialog for example.

All the elements works as expected on the demo page, but this are not real scenarios,

Regards

dfreedm commented 9 years ago

Thanks for the image repros, those are very helpful. I still can't get this to repro on desktop, but it was very easy to repro with touch. I'll take a look.

kungufli commented 9 years ago

Now it works better, but there is still a minor incongruence: in the case where you tap near the edge of the element the menu is not opened at all but you can see the ripple effect, so you are telling the user that he hit the button, but the menu is not opening.