MouseOutHandler problem

[ilab]

The problem: if you have a Canvas with a scrollbar, then MouseOutHandler is not working as expected.

Environment:
SmartClient Version: v11.1p_2017-09-27/LGPL Development Only (built 2017-09-27)
Chrome Verzió: 60.0.3112.113 (also with other browsers)

Minimal example:

    public void onModuleLoad() {

        Canvas parentCanvas = new Canvas();
        parentCanvas.setSize("300", "300");
        parentCanvas.setBackgroundColor("green");
        parentCanvas.addMouseOutHandler(event -> GWT.log("green parent mouseout x: " + event.getX()));

        Canvas blueCanvas = new Canvas();
        blueCanvas.setSize("150", "150");
        blueCanvas.setTop(0);
        blueCanvas.setLeft(150);
        blueCanvas.setBackgroundColor("blue");
        blueCanvas.addMouseOutHandler(event -> GWT.log("blue child mouseout x: " + event.getX()));

        Canvas yellowCanvas = new Canvas();
        yellowCanvas.setSize("150", "150");
        yellowCanvas.setOverflow(Overflow.SCROLL);
        yellowCanvas.setTop(150);
        yellowCanvas.setLeft(150);
        yellowCanvas.setBackgroundColor("yellow");
        yellowCanvas.addMouseOutHandler(event -> GWT.log("yellow child mouseout x: " + event.getX()));

        parentCanvas.addChild(blueCanvas);
        parentCanvas.addChild(yellowCanvas);
        parentCanvas.draw();
    }

Steps to reproduce with the example above:

1. Position the mouse cursor inside the blue area.
2. Move the mouse cursor to the right out of the blue area.
3. Notice that an onMouseOut event occured both on the parent (green) and the child (blue) with x position greater or equal than 300 which is the width of the parent object:
   1. 17:10:21.643 blue child mouseout x: 313
   2. 17:10:21.644 green parent mouseout x: 313
4. This is OK so far.
5. Now position the mouse cursor inside the yellow area.
6. Move the mouse cursor to the right out of the yellow area.
7. Notice that an onMouseOut event occured both on the parent (green) and the child (yellow) with x position LOWER than 300, that is, when the cursor was above the scrollbar:
   1. 17:10:34.111 yellow child mouseout x: 290
   2. 17:10:34.112 green parent mouseout x: 290
8. This is not what I expect.

I can accept that onMouseOut is called when the mouse pointer goes over the scrollbar but it should also be called when the mouse pointer leaves the real area of the canvas (which includes the scrollbar). Currently there seems to be no way to find out when the mouse cursor actually leaves the the canvas.
If there is a way, please share with me.
Thank you!

[Isomorphic]

You will receive a mouseOut when going over the scrollbar, since the Scrollbar is actually a separate widget with a number of features (including styling, standalone use).

Whatever you are doing on mouseOut, if you don't want to do it when the cursor is over the scrollbar, just check whether you are over the scrollbar.

[ilab]

I understand that I receive a mouseOut when going over the scrollbar.
And yes, of course, I can check in a mouseout whether I am over the scrollbar.

The thing I am not able to do is: get notified when I am actually out of the component, because there is no any event triggered.
OnMouseout is triggered only when I am over the scrollbar, which is ok, I can skip that, but there is no another OnMouseout!

Please see the capture: http://sendvid.com/qt6n25ea
There is a mouseout when going over the scrollbar (again: OK, understood, I can skip that) but there should be a mouseout also with position x greater or equal to 300 so that I can do whatever I need when the mouse leaves the area.

[Blama]

Hi Isomorphic,

most likely not related, but this one is also about mouseOut problems.

Best regards
Blama

[Isomorphic]

In your sample, you have a parent canvas containing the child that has the scrollbars. Is it sufficient for your purpose that the parent receives a mouseOut when the cursor leaves the scrollbar? The scollbars are actually peers, not children, of the canvas they scroll, but they are children of the parent canvas. So when events are bubbled from the scrollbars it makes sense that they reach the parent - but not so much the (peer) child.

[ilab]

In my sample, both blueCanvas (no scrollbars) and yelowCanvas (has scrollbars) are children of parentCanvas.
If you pull the mouse pointer out of blueCanvas, you can see that the parentCanvas (green) really got a mouseOut event as you wrote.
However in the case of yellowCanvas, the parentCanvas (green) doesn't get a mouseOut event when the pointer goes out of the scrollbar, although checking the DOM, you can see that the scrollbar is children of the parentCanvas.
So, it doesn't seem to work as you described or do I miss something?

Regarding your question whether it is sufficient that that the parent canvas receives the mouseOut event when the pointer leaves the scrollbar (assuming it happens): it seems to be applyable as a workaround, although it is not someting naturally comes to the mind of the user of the framework, so it is not really nice. Though, I understand the underlying reasons you described above.

[Isomorphic]

You don't see the event in the (green) parent with your code because the content of the (yellow) child isn't larger enough to actually activate the scrollbars - so they're disabled and block any events. To see the behavior we suggest, add some content to the yellow canvas larger than it's specified size.

For example. you could set the yellow canvas' contents to

"<DIV style=\"width:300px;height:300px\">FOO</DIV>"

So it sounds like that in that situation, you have the events you need?

[ilab]

It would be an acceptable workaround but unfortunately only partially works.

Please check the capture: http://sendvid.com/9kj0ws2o

If the mouse pointer is going out of the area through the draggable part of scrollbar, then it is almost ok - the mouseout arrives inside the area of the green canvas - please see the x position is 299.
Worse, there is still no mouseout event if the mouse pointer is pulled through the other parts of the scrollbar.

[Isomorphic]

We'll have to make a few changes to ensure that event always shows up in the parent - we were first just trying to determine whether that actually would solve your issue. Looks like it should, from what you say.

[ilab]

Yes, that would solve the issue thank you

[Isomorphic]

We've applied a fix to SGWT 6.1p/SC 11.1p and newer releases to ensure that you get the mouseOut events we discussed (in the parent of the overflow:"scroll" canvas). We haven't yet made any change to allow events past disabled widgets, as that will require some internal discussion on our part first, so you'll need to ensure that the scrollable canvas actually overflows. (Perhaps you could set overflow to "auto" instead of "scroll"?)

The fix will be in the nightly builds dated 2017-10-18 and beyond.

[ilab]

It is working as expected, thank you!