Enhance touch feedback of dojox/mobile/Button

[Eric Durocher]

The current feedback of a dojox/mobile/Button when you touch it on a mobile is:

• touch down -> nothing happens
• touch release -> button gets selected and stays selected for 1 sec (customizable through the delay property).

This is not optimal since it gives the impression that nothing has happened on touch down. Furthermore, the selection delay does not seem very useful since, most of the time, an action has already taken place as soon as the user released his finger.

In addition, this is different from the usual behavior of a Button, which is:

• touch down -> button gets selected
• touch release - buttons gets deselected

A proposed way to enhance the behavior is to:

• in all mbl*ButtonSelected rules in the theme CSS, add a mbl*Button:active selector, so the selected rule also applies when the button is pressed
• set the delay to 0 by default

[Eric Durocher]

Modified test case using the workaround for better mobile Button feedback

[Eric Durocher]

Another workaround for fast mobile buttons using touch events

[Eric Durocher]

It seems the CSS solution using the :active pseudo-class does not work on Android (at least some versions) because :active stays when you move the finger out of the button and release...

So I attached a different solution which extends the Button class to handle touch (or mouse) events to "press" the button and fire synthetic click events.

[bill]

Does :hover work?

The JS solution you are describing sounds like what dijit/_CssStateMixin does already, although it's probably more code and functionality than you want.

[Sebastien Pereira]

A solution based on Eric's proposal test_Button_fast_touch.html​ is provided in pull request ​https://github.com/dojo/dojox/pull/9

[cjolif]

This has to be in 1.10 & 2.0.

[Bill Keese <[email protected]…>]

In 7ec319d1d152d54e3ab511be8089c7739fd763ab/dojo:

Error: Processor CommitTicketReference failed

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

[Patrick Ruzand <[email protected]…>]

In bae97310b9758b16de7b80ec7d32a9e1876237e5/dojox:

Error: Processor CommitTicketReference failed

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

[Adrian Vasiliu]

seb, concerning the changes in dojo/touch to add support for dojoClick's "useTarget" value, I would think it would be nice to also add the corresponding documentation (API doc and reference guide).

[Sebastien Brunot]

There is a side effect to this fix, that can be reproduced using the test page dojox/mobile/tests/test_FormControls.html (reproduced with iOS 5.1.1 (iPad 1), iOS 7.0.6 (iPhone 5) and Android 4.2.2 (Samsung Galaxy 4)): when the page is displayed, use each control (buttons, checkbox, toggle button, switch, radio button, slider) and then click the combo box: it is impossible to select an entry in the combo box.

Debugging on iOS 7.0.6 shows that the issue occurs line 108 of dojo/touch.js:

clickTracker = dom.isDescendant(win.doc.elementFromPoint((e.changedTouches ? e.changedTouches[0].pageX : e.clientX),(e.changedTouches ? e.changedTouches[0].pageY : e.clientY)),clickTarget);

Apparently, on this version of iOS, elementFromPoint needs the coordinates returned by e.changedTouches[0].clientX and e.changedTouches[0].clientY to return the element on which the last event occurred.

[Adrian Vasiliu]

With iPad Air iOS 7.1.1, I reproduce with 1.10b1, but I don't reproduce anymore with a fresh update of dojo/dojox/dijit today. The code for the clickTracker in dojo/touch didn't change, so apparently the faulty code was elsewhere and got fixed?

[Sebastien Brunot]

I'm still reproducing with iphone 5 iOS 7.0.6 with a fresh update of dojo/dojox/dijit.

[Sebastien Pereira]

Reproduced also on android:

• open dojox/mobile/tests/test_forControls.html
• click on a button (don't do any other action before)
• try to scroll the view: nothing happens
• open the Combobox
• try to select an entry: nothing happens

This is a side effect of dojo/touch.js in ​https://github.com/dojo/dojo/blob/7ec319d1d152d54e3ab511be8089c7739fd763ab/touch.js#L69

Handlers that are created in doClick scope refer to the variable useTarget which is declared in doClick. These handlers are create on doClick firt call: value of useTarget is the value from the first call and never changes for subsequent calls.

Solution is to declare and initialize useTarget=false here ​https://github.com/dojo/dojo/blob/7ec319d1d152d54e3ab511be8089c7739fd763ab/touch.js#L14.

[Sebastien Pereira]

Replying to sbrunot:

Apparently, on this version of iOS, elementFromPoint needs the coordinates returned by e.changedTouches[0].clientX and e.changedTouches[0].clientY to return the element on which the last event occurred.

Indeed, e.changedTouches[0].pageX should be replaced by e.changedTouches[0].pageX - win.global.pageXOffset, otherwise node.elementFromPoint() won't return the pointed element when the viewport is scrolled.

[Sebastien Pereira]

Fixed in dojo: ​https://github.com/dojo/dojo/commit/dd9f93a1d430fd0074e9e795091b5d61274cee35 dojox/mobile test updated in: ​https://github.com/dojo/dojox/commit/0521f955a2310b142711d8a78055759006547f48