[1.0] [Gestures] Touch input focus event occurs without corresponding down, up or tap events

[cdata]

For buttons, we use peripheral pointer input events (up and down) to determine if a focus event came keyboard input or pointer input. However, sometimes the corresponding raw pointer input events (touchstart and touchend) have a dissonant target from their counterpart synthetic mousedown and mouseup events. Below is an example transcript from logging I have done while measuring these events. The first transcript demonstrates the expected events and their corresponding targets:

POLYMER DOWN <simple-button toggles tabindex=​"0" role=​"button" aria-disabled=​"false" aria-pressed=​"false" focused>​…​</simple-button>​
RAW TOUCHSTART <simple-button toggles tabindex=​"0" role=​"button" aria-disabled=​"false" aria-pressed=​"false" focused>​…​</simple-button>​
POLYMER UP <simple-button toggles tabindex=​"0" role=​"button" aria-disabled=​"false" aria-pressed=​"false" focused>​…​</simple-button>​
POLYMER TAP
RAW TOUCHEND <simple-button toggles tabindex=​"0" role=​"button" aria-disabled=​"false" aria-pressed=​"false" focused>​…​</simple-button>​
RAW MOUSEDOWN <simple-button toggles tabindex=​"0" role=​"button" aria-disabled=​"false" aria-pressed=​"false" focused>​…​</simple-button>​
POLYMER FOCUS <simple-button toggles tabindex=​"0" role=​"button" aria-disabled=​"false" aria-pressed=​"false" focused>​…​</simple-button>​
RAW MOUSEUP <simple-button toggles tabindex=​"0" role=​"button" aria-disabled=​"false" aria-pressed=​"false" focused>​…​</simple-button>​
RAW CLICK <simple-button toggles tabindex=​"0" role=​"button" aria-disabled=​"false" aria-pressed=​"false" focused>​…​</simple-button>​

And here is a second transcript for the condition where the Polymer input events are not received:

RAW TOUCHSTART <div class=​"vertical-section vertical-section-container centered">​…​</div>​
RAW TOUCHEND <div class=​"vertical-section vertical-section-container centered">​…​</div>​
RAW MOUSEDOWN <simple-button tabindex=​"0" role=​"button" aria-disabled=​"false" class=​"keyboard-focus" focused>​…​</simple-button>​
POLYMER FOCUS <simple-button tabindex=​"0" role=​"button" aria-disabled=​"false" class=​"keyboard-focus" focused>​…​</simple-button>​
RAW MOUSEUP <simple-button tabindex=​"0" role=​"button" aria-disabled=​"false" class=​"keyboard-focus" focused>​…​</simple-button>​

As you can see, in the second transcript, the target for touchstart and touchend is not the same as the target for mousedown and mouseup. Also, in the second case, click is never fired.

For reproduction purposes, I produced these results in Chrome 43 with developer tools mobile device emulation enabled.

[dfreedm]

I have an inkling that synthesized mouse events will retarget to focusable nodes in Blink.

@RByers, have some perspective on this notion?

[dfreedm]

Circling back, this is our old friend fuzzy touch targeting! Mitigation strategies will have to involve manually re-adjusting focus.

[cdata]

Relevant Chrome bug: https://code.google.com/p/chromium/issues/detail?id=417534

[RByers]

Sorry for the delay (just leaving on vacation now, clearing out backlog).

One thing that may help here (for blink at least) is to check the sourceCapabilities.firesTouchEvents property of the focus event in question. If there are other scenarios (eg. separating keyboard focus from mouse focus) it would be easy to extend InputDeviceCapaibilities for this (file an issue).

In general there's no way to correlate the touch event target to the mouse event target (eg. the DOM could have changed between touchend and mousedown). But firesTouchEvents is designed to let you identify the events that were triggered as a result of touch events.

Also I'm surprised by the missing click case you mention. Whenever we detect a tap, we always fire mousemove, mousedown, mouseup and click. There are some special cases involving the DOM changing between mousedown and mouseup but assuming both went to the same node, there should also be a click to that node. If you can reproduce otherwise, please file a bug and we'll investigate!

/cc @dtapuska (for while I'm on vacation).

[ymaz]

Hello guys, any updates on this issue? I'm still have the same 'miss-tap' behavior in Polymer 1.5.0.
So, the tap actually runs the animation and so on, but not fire the actually on-tap event handler.
Or, I could use on-click event for such kind of buttons? For click event it's fires rather more accurate.
Thanks.

[philippelesaux]

+1
It seems the tap radius is triggering the focus state, but the click event is only firing under the center.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!