Odd MouseOut Event Behavior on ListGrid

[chimpeenuts]

Version: Smart GWT Power 3.0. Using nightlies from Feb 22nd.

In my web app, I have created a ListGrid 'popup' that I display when the mouse hovers over another Widget.

Initially, I overrode getHoverComponent() on the Widget where I wanted to show my custom popup composed of a ListGrid (similar to http://www.smartclient.com/smartgwt/showcase/#grid_hover_related_records), but, unfortunately, the default behavior of hover components won't allow you to actually get the mouse into the popup listgrid to manipulate scrollbars, filters, sorting headers, etc. (For instance, in the client example above, highlight the General Office Products item and then try to actually get to the scrollbar of the ListGrid in the 'hover' Canvas...you can't making the popup somewhat useless).

So I made my own ListGrid 'popup' that I show/hide on the widget's HoverHandler and HoverHiddenHandler. That worked as expected.

Next, I wanted to hide my ListGrid 'popup' when the user moves his or her mouse OUT of the popup's ListGrid.

Unfortunately, a ListGrid's addMouseOutHandler does not appear to work as expected. This event is triggered as soon as the user moves outside of the first ListGrid header the user moves his or her mouse over and I end up hiding my 'popup' almost immediately (which defeats the whole purpose).

I then looked at ListGrid.getGridRenderer().addMouseOutHandler. This **almost** works. This fires when the mouse leaves 95% of the grid. Unfortunately, it does not fire if the ListGrid is showing a scrollbar as it appears the ScrollBar is not handled by the GridRenderer so if the user moves the mouse from a ListGrid row to the scrollbar and then off the entire ListGrid 'popup' the MouseOutHandler does not get called and my 'popup' remains visible.

I tried placing the ListGrid into a VLayout with the exact same behavior (which I found a bit odd).

In summary, it appears the ListGrid.addMouseOutHandler has a bug in that it fires as soon as the user enters the first ListGrid header and then leaves that header, even if he or she moves their mouse to a ListGrid row.

I was thinking of trying the ListGrid.addMouseMoveHandler and just checking to see if the mouse moves 'close' to the boundaries of my popup ListGrid but that exhibits the 'odd' behavior that it fires when over listgrid headers, cells, and the Filter Editor BUTTON, but NOT when over the listgrid's scrollbars OR the Filter Editor input value fields.

Has anybody found a workaround to this bug?

[Isomorphic]

Events bubble. Look at the source of the event to avoid reacting to mouseOuts bubbling from subcomponents.

[chimpeenuts]

Events bubble. Look at the source of the event to avoid reacting to mouseOuts bubbling from subcomponents.

That's actually the bug. The ListGrid is NOT correctly bubbling subcomponent events, it's taking the MouseOutEvents for all its children and declaring itself as the source.

This is easily producible on any ListGrid.

Here's my event handler code:

_myListGrid.addMouseOutHandler(new MouseOutHandler() {
   public void onMouseOut(MouseOutEvent event) {
      System.out.println(event.getSource().getClass().getName() + "\n");
      }
});

Here are the outputs I get:

1) Move Mouse from one ListGrid Header to another ListGrid Header (just to make it clear, these are Headers from the SAME grid):

com.smartgwt.client.widgets.grid.ListGrid

2) Move Mouse from ListGrid Header to ListGrid's Filter Editor(s):

com.smartgwt.client.widgets.grid.ListGrid

3) Move Mouse from Filter Editor Submit Button (one with Filter Icon) to ListGrid's Filter Editor(s):

com.smartgwt.client.widgets.grid.ListGrid

4) Move Mouse from ListGrid row to ListGrid's scrollbar:

com.smartgwt.client.widgets.grid.ListGrid

5) Move Mouse from ListGrid Header to its own Header Context Menu selector:

com.smartgwt.client.widgets.grid.ListGrid

6) Move Mouse from ListGrid Filter Editor Submit button (again one with Filter icon) to ListGrid's scrollbar:

com.smartgwt.client.widgets.grid.ListGrid

How am I supposed to know when the Mouse actually moves out of a ListGrid when it appears the event above fires when moving in/out of EVERY ListGrid subcomponent yet the Source is always ListGrid?

[chimpeenuts]

So I 'somewhat' worked around my issue by checking the mouse coordinates against the bounds of the entire listgrid:

		listGrid.addMouseOutHandler(new MouseOutHandler() {
			public void onMouseOut(MouseOutEvent event) {
				if (listGrid.getLeft() >= event.getX()
				    || listGrid.getRight() <= event.getX()
				    || listGrid.getTop() >= event.getY()
				    || listGrid.getBottom() <= event.getY()) {
					listGrid.hide();
				}
			}
		});

However, there is still an issue that the MouseOutHandler never gets fired if the user moves the mouse from the ListGrid's FilterEditor to another component without passing through the other components of the FilterEditor. There should be some way to know when the user mouse outs from the ListGrid's FilterEditor...