Opened 7 years ago

Closed 5 years ago

#15913 closed enhancement (fixed)

Enhance touch feedback of dojox/mobile/Button

Reported by: Eric Durocher Owned by: Patrick Ruzand
Priority: blocker Milestone: 1.10
Component: DojoX Mobile Version: 1.8.0
Keywords: Cc: Sebastien Pereira
Blocked By: Blocking:

Description

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

Attachments (2)

test_Button_fast.html (4.4 KB) - added by Eric Durocher 6 years ago.
Modified test case using the workaround for better mobile Button feedback
test_Button_fast_touch.html (5.1 KB) - added by Eric Durocher 6 years ago.
Another workaround for fast mobile buttons using touch events

Download all attachments as: .zip

Change History (19)

Changed 6 years ago by Eric Durocher

Attachment: test_Button_fast.html added

Modified test case using the workaround for better mobile Button feedback

Changed 6 years ago by Eric Durocher

Attachment: test_Button_fast_touch.html added

Another workaround for fast mobile buttons using touch events

comment:1 Changed 6 years ago by 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.

Last edited 6 years ago by Eric Durocher (previous) (diff)

comment:2 Changed 6 years ago by 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.

comment:3 Changed 6 years ago by 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

comment:4 Changed 6 years ago by cjolif

Owner: changed from Eric Durocher to Patrick Ruzand
Priority: undecidedhigh
Status: newassigned

comment:5 Changed 6 years ago by cjolif

Milestone: tbd1.10
Priority: highblocker

This has to be in 1.10 & 2.0.

comment:6 Changed 6 years ago by Bill Keese <bill@…>

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? 

comment:7 Changed 6 years ago by Patrick Ruzand <pruzand@…>

Resolution: fixed
Status: assignedclosed

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? 

comment:8 Changed 6 years ago by Adrian Vasiliu

Cc: Sebastien Pereira added

comment:9 Changed 6 years ago by 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).

comment:10 Changed 5 years ago by 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.

comment:11 Changed 5 years ago by Sebastien Brunot

Resolution: fixed
Status: closedreopened

comment:12 Changed 5 years ago by 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?

Last edited 5 years ago by Adrian Vasiliu (previous) (diff)

comment:13 Changed 5 years ago by Sebastien Brunot

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

comment:14 Changed 5 years ago by 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.

comment:15 in reply to:  10 Changed 5 years ago by 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.

Last edited 5 years ago by Sebastien Pereira (previous) (diff)

comment:17 Changed 5 years ago by Sebastien Pereira

Resolution: fixed
Status: reopenedclosed
Note: See TracTickets for help on using tickets.