#14918 closed defect (fixed)
Menu: does not select on first touch (iOS)
Reported by: | Pete Smith | Owned by: | bill |
---|---|---|---|
Priority: | high | Milestone: | 1.8 |
Component: | Dijit | Version: | 1.7.2 |
Keywords: | Cc: | ykami | |
Blocked By: | Blocking: |
Description
Even on the demo page, on my iPad, if I touch the select (aka click) it opens. If I touch an option, it highlights, but does not select. If I touch it again, it selects.
Attachments (1)
Change History (11)
comment:1 Changed 9 years ago by
Milestone: | tbd → 1.8 |
---|---|
Status: | new → assigned |
Summary: | Dijit.form.Select does not respond to touch → Dijit.form.Select does not select on first touch |
comment:2 Changed 9 years ago by
comment:3 Changed 9 years ago by
Owner: | changed from Douglas Hays to bill |
---|---|
Priority: | undecided → high |
_OnDijitClickMixin is listening for click events and on the first touch, only a touch start/end fire.
comment:4 Changed 9 years ago by
Cc: | ykami added |
---|---|
Component: | Dijit - Form → Dijit |
Summary: | Dijit.form.Select does not select on first touch → Menu: does not select on first touch |
That's a weird one. Usually touching a node causes a click event (ex: dijit/form/Button), but clicking a drop down menu from a dijit/form/Select, dijit/form/ComboButton, or dijit/MenuBar has this issue.
As @httpete showed (thanks!) it's something to do with the focus changes, and I suspect it's a webkit bug. I added some logging and found:
- Clicking the Select or DropDownButton moves focus to the HTMTableRowElement aka MenuItem. It's weird to put focus on a TR rather than a TD, although that might be a red herring.
- The first (unsuccessful) attempt to click the MenuItem has a touchstart and touchend event, but no click event. After the touchend, there are two spurious focus changes from HTMTableRowElement --> null an then back to the HTMTableRowElement again.
- The second click attempt generates a touchstart/touchend and then a click event
I'm cc'ing @ykami because I remember the dojox mobile code changed it's click handling recently, to monitor touchstart/touchend instead of click and IIRC to not treat touchstart --> touchmove --> touchend as a click event. Can you tell me where that code is and why you needed to add it?
PS: @httpete, the reason that focus code is there to begin with is for accessibility reasons, specifically because a screenreader reads whatever is focused. I'm talking about Windows, I'm not sure how/if that works on iPad. But also, see #10716. Hmm, I guess you don't need to see it since you wrote that ticket too.
comment:6 Changed 9 years ago by
For dijit/form/Select, if I set dijit/form/Select.js::_SelectMenu's autoFocus to false, or alternately do the fix listed in this ticket's description, it cures the problem temporarily. I can open a Select, click on a drop down item, and it's selected. But if I repeat (without refreshing the page) I get the same problem again, where the first click is ignored.
It seems like mobile safari just doesn't like it when you programatically muck with focus. Will investigate more.
comment:7 Changed 9 years ago by
Summary: | Menu: does not select on first touch → Menu: does not select on first touch (iOS) |
---|
comment:8 Changed 9 years ago by
I looked at eliminating/reducing focus events during mouse/touch operations. Focusing a MenuItem on hover is strange, as is focusing a MenuItem on click, unless it's on a *non*-popup menu, such as a MenuBar, in which case it's debatable.
I think at some point those extraneous focus events should be removed, but not sure if it would fully solve this problem since we still want to, for example, focus the first <input> upon opening a TooltipDialog, and then arguably, on closing the TooltipDialog, focus back to the <button> that opened it.
So I've found a simple workaround to this problem that I'll check in now, and leave rearchitecture to a later time.
Changed 9 years ago by
Attachment: | menuFocus.patch added |
---|
Start of patch to not focus menu items on hover or click, but just on keyboard interactions. Need to still remove references to focusedChild from Menu code (ex: in _openPopup()). The dijitMenuItemSelected class no longer gets applied on hover, and dijitSelectMenuSelected now always reflects the current value of the Select, rather than the hovered node which the user has not (yet) clicked to select.
I have patched this on my install, and it works near 100%. At least now it works on iPad.
in Select.js (my class which overrides d.form.Select)
then in MenuItem?.js line 126:
This lets the menu work right on iPad, and it works fine on my Firefox desktop as well. If there is one minor grief, there is a subtle little hesitation after I select the menu item on iPad. Some focus issue, but it is so small I don't think people would feel it. I bet with this you can make it perfect. Thank you Doughays.