search

ibm-js / delite

HTML Custom Element / Widget infrastructure
http://ibm-js.github.io/delite/
Other
68 stars 28 forks source link

HasDropDown: opening dialog may cause unwanted click, focus, or sticky hover #474

Closed wkeese closed 7 years ago

wkeese commented 7 years ago

HasDropDown has some fancy code to allow mouse-down on the arrow, slide to a menu choice, and then mouse-up to select that menu choice.

Unfortunately it causes various problems on mobile when the popup appears underneath the user's finger (before the user has released their finger from the screen). The problems include:

  1. If the popup contains a button, and the button appears under the user's finger, it may be clicked.
  2. If the popup contains an <input>, and the <input> appears under the user's finger, it may be focused.
  3. The element under the user's finger may get the :hover CSS pseudo-class and it won't be removed until the user clicks something else, due to the iOS "sticky hover" behavior (see http://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices etc.)