MouseOutEvent fired within assigned canvas

[wymanchung]

Hi,

I'm trying to create a popup panel using a VLayout to overlay on top current content.
The panel is supposed to be "shrink wrap" base on the referenced topic.
https://forums.smartclient.com/forum...-use-scrolling

There are two issues I'm facing:

1. The MouseOutEvent is fired within the assigned VLayout(allergyPopUp), which caused the popup panel closed before moving the cursor out of the VLayout(allergyPopUp).
   
   e.g. when I mouseover to the 2nd child of allergyPopUp, the mouseOut event is fired.
2. After the ResizedEvent is fired, the parent div's height is shrinked to defined height(380px), but the child content is overflowed and scrollbar is not initialized.

• alertAllergy and allergyPopUp is on peer level.
• alertAllergy is the trigger for popup panel, where allergyPopUp is the popup.
• allergyPopUp is populated with three HLayout members.

Code:

alertAllergy.addMouseOverHandler(new MouseOverHandler() {
    @Override
    public void onMouseOver(MouseOverEvent event) {

        if ((VLayout)((AlertAllergyPanel) event.getSource()).getPopUpFlow() != null && !allergyPopUp.isVisible()) {
            allergyPopUp.removeMembers(allergyPopUp.getMembers());

            allergyPopUp.addStyleName("allergy-popup");
            allergyPopUp.setVisibility(Visibility.HIDDEN);

            allergyPopUp.setPosition(Positioning.ABSOLUTE);
            allergyPopUp.setLeft(95);
            allergyPopUp.setTop(((AlertAllergyPanel) event.getSource()).getTop() + 1);

            allergyPopUp.setWidth((int)(((AlertAllergyPanel) event.getSource()).getWidth() * 0.99 - 1) - 90);
            allergyPopUp.setOverflow(Overflow.VISIBLE);

            allergyPopUp.addMembers(((VLayout)((AlertAllergyPanel) event.getSource()).getPopUpFlow()).getMembers());

            allergyPopUp.bringToFront();

            allergyPopUp.show();
        }
    }
});

allergyPopUp.addMouseOutHandler(new MouseOutHandler() {
    @Override
    public void onMouseOut(MouseOutEvent event) {
        if (((VLayout) event.getSource()).isVisible()) {
            ((VLayout) event.getSource()).hide();
        }
    }
});

allergyPopUp.addResizedHandler(new ResizedHandler() {
    @Override
    public void onResized(ResizedEvent event) {
        if (((VLayout) event.getSource()).getOffsetHeight() > 400) {
            ((VLayout) event.getSource()).setOverflow(Overflow.AUTO);
            ((VLayout) event.getSource()).setHeight(380);
        } else {
            ((VLayout) event.getSource()).setOverflow(Overflow.VISIBLE);
        }
    }
});

SmartGWT version - 4.0p

[Isomorphic]

mouseOut events bubble, so you would expect to receive mouseOut events bubbled from your children as the mouse moves between the events.

There is way too little information to guess at how overflow is not behaving as you hoped, but directly changing the DOM inside of a SmartGWT element (including your invalidate call to addStyleName() - that's not a SmartGWT API) will cause overflow problems.

getOffsetHeight() is also not a documented SmartGWT API - you might want getScrollHeight().

It also looks likely that you are mixing core GWT and SmartGWT widgets. This is usually invalid - see FAQ.

Note also, 4.0 is too old to file a bug against, but if you have the same problem with a recent version (fully patched), if you can make it into a standalone, ready-to-run test case and all of the above problems have been corrected, we could check it out.

[wymanchung]

Thanks for the quick response,

You're right about the mouseOut event, I totally forgot about the event bubbling for mouseOut.

Both .setOverflow(Overflow.VISIBLE) and .setOverflow(Overflow.AUTO) works if I set it when creating the widgets.

But if I change it within the eventHandler, it doesn't change the overflowing behavior.

Does it require redraw/reflow or some widget update?

I don't think I'm allowed to update the SmartGWT version, so I just want to make sure the call about changing overflow behavior is correct.

 widget.addResizedHandler(new ResizedHandler() {    
    @Override public void onResized(ResizedEvent event) {        
        widget.setOverflow(Overflow.AUTO);        
        widget.setHeight(380);    
    }
});

[Isomorphic]

Changing overflow on the fly is allowed, but would only be a supported approach once all of those other problems we mentioned were corrected.

And again, it’s too late to file bugs against 4.0, so even if you did find a bug, you would need to work with our consulting team if you wanted it patched or worked around.