Opened 8 years ago

Closed 8 years ago

#13829 closed defect (fixed)

Unable to receive mousdown event

Reported by: Paul Christopher Owned by: Douglas Hays
Priority: high Milestone: 1.7
Component: DojoX Mobile Version: 1.7.0b1
Keywords: Cc: ykami, Atsushi Ono
Blocked By: Blocking:

Description

Steps to reproduce:

  • take dojox/mobile/tests/test_iPhone-RoundRect?.html
  • Add following code to the script tag in the head

dojo.addOnLoad(function(){

dojo.connect(null,"onmousedown", function(){

console.log("mouse down");

});

dojo.connect(null,"onmouseup", function(){

console.log("mouse up");

});

});

Click on the page. This will work. You will receive the events.

Now change the view type to scrollable view as follows:

<div id="foo" dojoType="dojox.mobile.ScrollableView?" selected="true">

Try again. You won't receive a mousedown event when clicking on the RoundRect?. The same is true for a dojox.mobile.Heading: You won't receive a mousedown event/touchstart event there either, but only a mouseup event.

This is a major blocker for me since I need to get informed, if the user clicks somewhere else so that I can close my action sheet again (http://bugs.dojotoolkit.org/ticket/13819).

Attachments (5)

13829.patch (2.6 KB) - added by Douglas Hays 8 years ago.
patch to remove cover/z-index dependency for Opener widget
13829_2.patch (1.6 KB) - added by Douglas Hays 8 years ago.
move cover to child of Opener to inherit z-index
13829_3.patch (10.9 KB) - added by Douglas Hays 8 years ago.
patch with position:absolute for Overlay and position:fixed for Tooltip to work with Android phones
13829-opener-cover-patch.txt (2.8 KB) - added by Atsushi Ono 8 years ago.
[patch][ccla] Add orientation change listener to resize cover (just updated patch file format)
13829-opener-cover.patch (2.8 KB) - added by Atsushi Ono 8 years ago.
[patch][ccla] Add orientation change listener to resize cover (rename file extension to be recognized as patch)

Download all attachments as: .zip

Change History (29)

comment:1 Changed 8 years ago by ykami

Cc: ykami added
Owner: changed from ykami to Douglas Hays

Doug, this looks another z-index issue again..
I think z-index for the Opener cover must be higher than the ones for the others, though I know we need to be very careful when we use z-index. What do you think?

Paul, I think it is possible for us to solve your closing action sheet problem, but unfortunately, in general, you can't listen to mouse events on ScrollableView, because it disables the browser's default event handlers to build its own scrolling machinary. (onclick is an exception. ScrollableView programmatically fires a fake click event when it detects a click-like operation.)

comment:2 Changed 8 years ago by Paul Christopher

First of all: It makes a lot of fun working with dojox.mobile! And many thanks for being so responsive!

I have'n got an iPad, but there seem to be action sheets that do not have a "done" or "cancel" button, see page 120 in Apple's iOS Humane Interface Guidelines. I assume that these action sheets are closed if the user clicks somewhere else. So I need a way to detect these clicks and close the tooltip. With normal web applications, I have always subscribed to the mousedown-event of the body element.

The situtation at the moment is this: You have a scrollable view with a roundrect-list (using mblDomButtonBlueCircleArrow, I think that is the correct way to show an action sheet associated with a list item). If you click on a list-item, a tooltip will appear which points to <div class="mblListItemRightIcon">. The tooltip has no done or cancel button but only a selection of actions to perfom on the respective item. Note: there could be different items in the list, so the action-sheet may differ from one item to item. I need a way to detect clicks outside the action sheet so as to close it immediately. "onclick" and "onmouseup" is too late. Imagine you scroll the page downwards with the tooltip open. The tooltip will lose its original anchor <div class="mblListItemRightIcon"> and point to nowhere or to another list-item which has a completely different tooltip because the tooltip is of a different type. That's why "mouseup" is too late. It is fired when scrolling has finished.

comment:3 Changed 8 years ago by ykami

You don't have to care about mouse events for somewhere else to close your action sheet. The Opener widget should automatically do that for you. The Opener widget creates a transparent cover that covers the entire screen when Overlay or Tooltip pops up. Touching the cover should close the popup. However, currently there's some z-index problem, and the cover is sometimes lower than some UI elements, which prevents the popup from closing.

Changed 8 years ago by Douglas Hays

Attachment: 13829.patch added

patch to remove cover/z-index dependency for Opener widget

comment:4 Changed 8 years ago by Douglas Hays

Paul/ykami, I attached a patch that removes the need for the fullscreen cover generated by the Opener widget (using event handlers instead on documentElement) and thus also the added complexity of computing a z-index since its required z-index would have to be greater than the page's highest z-index but lower than the Tooltip/Opener? z-index. Please try out the patch to make sure it works for you. You may need to set z-index for the Opener/Tooltip? widget if you have other elements on the page that have non-default z-index values. Let me know of any problems that you find or that I may not have thought of.

comment:5 Changed 8 years ago by ykami

Doug, I think we need the fullscreen cover. Please try the attached test case in a larger size window, and open a tooltip by pressing the button. And then, click on the underlying ListItem. The tooltip disappears, but view transition occurs at the same time. I don't think this is an expected behavior.

Changed 8 years ago by Douglas Hays

Attachment: 13829_2.patch added

move cover to child of Opener to inherit z-index

comment:6 Changed 8 years ago by Douglas Hays

Paul/ykami, I changed the cover to be a child of the Opener's domNode so that if z-index is specified on the Opener widget, then the cover will inherit it. Please let me know if this fixes the underlying z-index problem. A specific z-index on the Opener node will still be needed if other page elements have z-index specified. I hate to add a huge z-index to Opener's default CSS since that will just exacerbate the problem.

comment:7 Changed 8 years ago by ykami

Doug, I agree to your idea. That seems better than having a magic z-index number. I have one suggestion though. Currently, Tooltip closes on blur, while Overlay doesn't. I think that's reasonable behavior for iOS, but it may not be true for Android. How about giving an option, something like closeOnBlur="true", to users?

Changed 8 years ago by Douglas Hays

Attachment: 13829_3.patch added

patch with position:absolute for Overlay and position:fixed for Tooltip to work with Android phones

comment:8 Changed 8 years ago by Douglas Hays

Paul, last chance to review 13829_3.patch before I commit it...

comment:9 Changed 8 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

In [26586]:

Fixes #13802, #13829, #13830. Add default z-index of Tooltip and Overlay to 2000 to match TooltipDialog? in dijit. Add full screen cover to intercept click events that can close either. The default is to close Tooltip but not Overlay. When onclick outside the popup fires, Opener calls widget.onBlur. If false is returned, then the widget ignores the click. Anything else will cause widget.hide() to be called.

comment:10 Changed 8 years ago by ykami

Doug, I know you are out, but [26586] broke test_Opener-ActionSheet-async.html. You can no longer press the overlay action sheet buttons since the cover is above the buttons. A workaround I found is to give position:relative to each buttons, though I am not sure why it solves the problem.. Is it an expected behavior? Do we always need position:relative for Overlay contents?

comment:11 Changed 8 years ago by ykami

Calendar buttons cannot be pressed either.

comment:12 Changed 8 years ago by ykami

In [26600]:

Refs #13829 !strict Added z-index:-1 to .mblOpenerUnderlay to be able to click on the overlay contents.

comment:13 Changed 8 years ago by ykami

Not sure why, but unfortunately it looks Opener (=Overlay) on android became more unstable than before. While poping up and down Opener, screen-flickers frequently occur very badly, and sometimes pop-up/down animation does not work. Also, once I touch the transparent cover, I can no longer press the buttons (Cancel, Done) on the heading. Those instability cannot be seen on iPhone or Chrome.

comment:14 Changed 8 years ago by Douglas Hays

In Opener.js, tabIndex: '-1', needs to be added to domConstruct.create(). Clicking the cover is changing focus and thus the next click on the Overlay area is just a focus event. Also, changing cover to use transitions instead of animations may help the android speed.

comment:15 Changed 8 years ago by ykami

In [26601]:

Refs #13829, #13812 !strict Added z-index:-1 directly to the opener cover node, and reverted z-index:-1 for .mblOpenerUnderlay. Added device specific background colors to views in the transition animation test files. Changed cover/reveal to use transitions instead of animations to solve the flicker problems. (Thanks Doug, you were right. fortunately the flicker disappeared.) This change also improves view transition behaviors on HTC android devices and galaxy tab. (Stephen was right.)

comment:16 Changed 8 years ago by ykami

Cc: Atsushi Ono added
Resolution: fixed
Status: closedreopened

The opener cover looks larger than the screen size, and that seems to cause problems. First of all, when the cover exists, the screen is horizontally scrollable, which is not good. And more serious problem is that the pop-down animation behaves very stragely on an HTC android device. The overlay first moves to the left, then it appears again, and finally pops down. Very weird. I asked onoat in the Cc list to take a look at these problems.

comment:17 Changed 8 years ago by ykami

Doug, as you pointed out, it looks test_Opener-RoundSelectList-async.html causes script errors on IE. I'll fix it.

comment:18 Changed 8 years ago by ykami

In [26608]:

Refs #13829 !strict Fixed script errors on IE. The cause of the problem was negative value (-2px) was given to height. Also, var ringtone, listPicker, trim; to test_Opener-RoundSelectList?-async.html, which was necessary for IE.

comment:19 Changed 8 years ago by ykami

Thank you onoat for the patch.
Doug, I will commit onoat's patch. It seems to solve the problems I mentioned in the comment:16. But please review it when you are back.

comment:20 Changed 8 years ago by ykami

In [26623]:

Refs #13829 !strict Applied onoat's patch, which adds an orientationchange listener to resize the cover.

Changed 8 years ago by Atsushi Ono

[patch][ccla] Add orientation change listener to resize cover (just updated patch file format)

Changed 8 years ago by Atsushi Ono

Attachment: 13829-opener-cover.patch added

[patch][ccla] Add orientation change listener to resize cover (rename file extension to be recognized as patch)

comment:21 Changed 8 years ago by Douglas Hays

ykami, is the tabIndex=-1 on the cover still needed on android?

comment:22 Changed 8 years ago by ykami

You meant zIndex=-1, right? I retested without zIndex=-1. I still cannot press the calendar's date picker buttons and the action sheet buttons. So I think zIndex=-1 for the cover is necessary.

comment:23 Changed 8 years ago by ykami

Doug, ok, you meant tabIndex=-1, not zIndex=-1. I don't think tabIndex=-1 is necessary. If you do not have any other concerns, I think you can close this ticket.

comment:24 Changed 8 years ago by Douglas Hays

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