search

PolymerElements / paper-menu-button

An element that allows composing a trigger and content as a dropdown menu.
https://www.webcomponents.org/element/PolymerElements/paper-menu-button
24 stars 46 forks source link

On touch devices, a tap to the paper-menu-button button is also handled by the resulting menu #79

Open lesliana opened 8 years ago

lesliana commented 8 years ago

Description

On a touch device, touching a paper-menu-button toggles the paper-menu to open, but then also incorrectly taps on whatever item within that menu is in the same position as the original button.

This appears to be because when the user touches the button, the touchstart+touchend events cause Polymer to fire a tap event, which is handled by paper-menu-button's 'toggle' handler function. The toggle function opens the paper-menu (if we're using the example dom in paper-menu-button.html, there is a child paper-menu with class dropdown-content). Meanwhile, the rest of the event chain from the touch continues firing in that same spot on the screen, and the mousedown, mouseup, and click events are handled by whatever child of the paper-menu is in the same spot on the screen as the original touch event. I think that when the paper-menu-button handles the first tap (with the toggle function), it should also preventDefault to stop the rest of the event chain from firing (note that preventDefault doesn't work in a tap handler until https://github.com/Polymer/polymer/issues/3567 is solved).

Expected outcome

A tap on the button opens the menu, and the menu stays open.

Actual outcome

A tap on the button opens the menu and immediately chooses one item from the menu and then closes the menu, without allowing the user to interact with the menu.

Live Demo

Having a lot of trouble getting jsbin to display a paper-menu-button - sometimes it'll work, then I'll edit one line (without changing anything about the imports) and it won't work anymore (I see this error, indicating the paper-menu-button resource hasn't been found: paper-menu-button.html:244 Uncaught TypeError: Cannot read property 'ANIMATION_CUBIC_BEZIER' of undefined)

Steps to reproduce

  1. Create a paper-menu-button that wraps a paper-button (class="dropdown-trigger") and a paper-menu (class = 'dropdown-content") that is the parent of several paper-items, each of which is wrapped in an endpoint.
  2. When you click the paper-button, the paper-menu should open such that the first paper-item is in exactly the same place as the paper-button.
  3. Emulate a mobile device. Click on the paper-button. The of the first paper-item navigates when it shouldn't.
cdata commented 8 years ago

@azakus I would like the propose that if the problem is, "more than one tap event can be generated for any given set of related pointer events," that this is a bug in Gestures. Could you provide some thoughts on that proposal?