dijit.form.ComboButton's onClick doesn't handle touch events

[ztravis]

It seems like dijit.form.ComboButton? fails to register clicks on touch devices. I used the test page at ​http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html, which logs to the console when you click on various buttons, and didn't see anything logged when clicking on ComboButtons? on IE11 on a touch-enabled laptop or in mobile safari on iOS7. In related tests setting breakpoints (at least in IE11) on the event handling code caused the callback to be fired correctly, perhaps due to IE11 changing how it handles these events (as native clicks vs simulated clicks/touch events) when debugging (although this is total speculation on my part!).

Right now I'm working around this by overriding the _attach method, defined in dijit/_AttachMixin.js, to handle 'dojoclick' attachments using dojox/gesture/tap instead of a11yclick (which as far as I can tell ultimately binds to 'onclick').

[bill]

a11yclick (which as far as I can tell ultimately binds to 'onclick').

"click" events should work on mobile as well as desktop. You can actually fix this bug (but break accessibility) by changing the template to say onclick instead of ondijitclick. (I also moved the listener to the <div> inside the <td>but that's probably unrelated.)

So, the problem is likely in dojo/touch.

on IE11 on a touch-enabled laptop

Hmm, unfortunately I don't have a Surface to test on. dojo/touch did have a problem on IE11 that was fixed by de651e6, maybe that fixes this problem too.

or in mobile safari on iOS7

I tethered my iPad (to see the console in desktop safari), and I don't get the console message from ComboButton? either. DropDownButton? does work though. Weird. And I get the console messages from plain dijit/form/Button (the first blue button, labeled "Create").

[bill]

OK, the iOS problem is quite complicated, but with a simple fix.

Using a11yclick (aka ondijitclick) triggers the fast-click handling in dojo/touch.js, where it listens to touchstart/touchend events and then generates synthetic click events. This gets tangled up with the _ButtonMixin.js code that calls this.valueNode.click(). Specifically:

1. user taps ComboButton?, generating touchstart and touchend events
2. that causes dojo/touch to emit a synthetic click event
3. _ButtonMixin.__onClick() is called
4. _ButtonMixin.__onClick() calls this.valueNode.click(), generating a native click event (but on a different node).
5. dojo/touch sees the native click event, and squelches it; this is from code designed to prevent duplicate click events

The code in dojo/touch makes an exception for INPUT.dijitOffScreen nodes. That's why dijit/Button works correctly. So we just need to add that class for ComboButton?'s <input>.

As for the IE11 problem, I'm going to assume that was fixed by de651e625d9d2dc9220e7a02647689a4299777d5.

[Bill Keese <[email protected]…>]

In e77a13c8d5f9d109c41cdc8488a765e1bd8912a2/dijit:

Error: Processor CommitTicketReference failed

Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

[Bill Keese <[email protected]…>]

In d3739cfb8859b990c65777250e4507c67018233f/dijit:

Error: Processor CommitTicketReference failed

Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

[Bill Keese <[email protected]…>]

In b7d6d40767ca6aca9d5b2d228f1a42447cf6407a/dijit:

Error: Processor CommitTicketReference failed

Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

[Bill Keese <[email protected]…>]

In 72e56f8f4061a72a01ae47e5934c0423da8dc41f/dijit:

Error: Processor CommitTicketReference failed

Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled?