Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#17388 closed defect (fixed)

Scrolling not possible in FilteringSelect drop down on mobile devices (iPad/Android pad)

Reported by: Alexander Kläser Owned by: bill
Priority: high Milestone: 1.7.6
Component: Dijit - Form Version: 1.9.1
Keywords: Cc:
Blocked By: Blocking:

Description

I observed that it is not possible to scroll in the drop down menu of a FilteringSelect? / ComboBox? widget. This can be seen testing on the following page:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/mobile.html

This applies to the iPad as well as an Asus Transformer Pad (→ running Android). Otherwise the handling of the focus (and keyboard) seems to be fine :) .

Attachments (1)

focus-problem-bug17388.png (115.2 KB) - added by Alexander Kläser 6 years ago.
Sketch of the focus behaviour on a mobile device.

Download all attachments as: .zip

Change History (21)

comment:1 Changed 6 years ago by bill

Owner: set to Douglas Hays
Priority: undecidedhigh
Status: newassigned

Good catch.

Doug, this is from the evt.preventDefault() call in _ListBase.js. I can get scrolling to work on iPad by changing:

evt.preventDefault();

to:

if(evt.type != "touchstart"){ evt.preventDefault(); }

Not sure if that change is OK or not though. I'm guessing the preventDefault() call is just to prevent an (unwanted) screen jump on desktop, but I'm not sure.

comment:2 Changed 6 years ago by Douglas Hays

Milestone: tbd1.9.2

comment:3 Changed 6 years ago by doughays-dojo <doughays@…>

Resolution: fixed
Status: assignedclosed

In 0482b557c761cdd96a640123bfb86200f667797c/dijit:

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

comment:4 Changed 6 years ago by doughays-dojo <doughays@…>

In ee63d723736ca7468a05e8df8459a352de9e0eca/dijit:

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

comment:5 Changed 6 years ago by Alexander Kläser

Thanks for the fast response! I checked the current built. On both pads I can now scroll, however, the drop down closes immediately when I lift the finger after scrolling. In this way, it is not possible to scroll and select an entry. Instead the entry is been selected which has been "touched" upon starting to scroll.

comment:6 Changed 6 years ago by Douglas Hays

Dijit doesn't have as much mobile support as dojox/mobile in the 1.x streams. Lifting your finger while over an item is firing an onClick event. If you lift your finger outside the list of choices, then you can continue to scroll.

comment:7 Changed 6 years ago by Alexander Kläser

Thanks for your answer. Albeit lifting the finger outside the scroll area would work, I am not convinced that many people would find out by themselves about this possibility. I agree that dijit does not have as much mobile support as dojox/mobile and it should not. Up to which degree is dijit suppose to support mobile browsers? As a developer, I would be very happy to know that I can use dijits in my website/RIA and they we will work for mobile devices, as well - not in an optimized fashion, but in a way such that they are usable (please let me know if this point of view does not correlated with dojo's goal!). Without scrolling/selecting this does not seem to be the case to me.

comment:8 Changed 6 years ago by bill

Resolution: fixed
Status: closedreopened

I'll take a look to see if I can fix that problem; I agree it's pretty bad.

comment:9 Changed 6 years ago by bill

Owner: changed from Douglas Hays to bill
Status: reopenedassigned

comment:10 Changed 6 years ago by bill

One solution seems to be to just monitor mouse events, see https://github.com/wkeese/dijit/tree/bug17388.

Probably the click listener should listen to touch.click rather than click, to avoid the 300ms delay.

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

Resolution: fixed
Status: assignedclosed

In f58eaae18cbeff7bb27cc58bec215fdd3fb20488/dijit:

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

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

Resolution: fixed
Status: assignedclosed

In 26c53a080a63b5190d23457ba98b15430998e61b/dijit:

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

comment:12 Changed 6 years ago by Alexander Kläser

Dear Bill, thank you very much for your answer and the fix! I checked it this morning on both pads, it works just fine, great :) !

I just noted a minor flaw in the focus behaviour. On the form test page for mobile devices, I can scroll in the drop down. If I now select the entry in the drop down which is positioned above, e.g., the NumberSpinner? element, the entry gets correctly selected, yet the focus is immediately moved onto the NumberSpinner? element. Not sure whether it is intended in this way.

comment:13 Changed 6 years ago by bill

I don't understand why you are talking about dijit/form/NumberSpinner. That doesn't even have a drop down.

It's expected behavior though that if you click something in the drop down, the drop down closes and focus is moved to the main widget.

Changed 6 years ago by Alexander Kläser

Attachment: focus-problem-bug17388.png added

Sketch of the focus behaviour on a mobile device.

comment:14 Changed 6 years ago by Alexander Kläser

It is a bit difficult to describe, I added a screenshot along with a sketch to describe the behaviour visually, I hope this makes it clearer. As said, it is just a minor flaw. Yes the focus should move to the main widget. I observed that the focus would go to the widget below the drop down menu item I selected via touch.

comment:15 Changed 6 years ago by bill

Ah right I've seen that problem before. It would be worse if there happened to be a submit button underneath the drop down (or something like that). It's clearly a webkit bug but unfortunately I don't know how to work around it.

comment:16 in reply to:  15 Changed 6 years ago by Alexander Kläser

OK.

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

In 51e13fb77f4a2bf713e50ee412c488d357f6562d/dijit:

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

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

In d33125dd4fc2629e9feb265cc26f6d82dda0bc1a/dijit:

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

comment:19 Changed 6 years ago by bill

Milestone: 1.9.21.7.6
Note: See TracTickets for help on using tickets.