#17693 closed defect (fixed)
dijit.form.ComboButton's onClick doesn't handle touch events
| Reported by: | ztravis | Owned by: | bill |
|---|---|---|---|
| Priority: | undecided | Milestone: | 1.9.4 |
| Component: | Dijit - Form | Version: | 1.9.0 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description
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').
Change History (6)
comment:2 Changed 6 years ago by
| Component: | General → Dijit - Form |
|---|---|
| Milestone: | tbd → 1.9.4 |
| Owner: | set to bill |
| Status: | new → assigned |
| Version: | 1.9.2 → 1.9.0 |
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:
- user taps ComboButton?, generating
touchstartandtouchendevents - that causes dojo/touch to emit a synthetic
clickevent _ButtonMixin.__onClick()is called_ButtonMixin.__onClick()callsthis.valueNode.click(), generating a nativeclickevent (but on a different node).- dojo/touch sees the native
clickevent, and squelches it; this is from code designed to prevent duplicateclickevents
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.
comment:3 Changed 6 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | assigned → closed |
comment:3 Changed 6 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | assigned → closed |
"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.
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.
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").