12.0p Unexpected and not removed browser scrollbars

[Blama]

Hi Isomorphic,

trying to create another testcase with hover removal (not done yet), I found this issue with browser scrollbars.

Please see this BuiltInDS-based testcase, where there are browser scrollbars for the main page on hover, if you hover the "Lifespan 999" in the "Piranha"-row.
It is not happening for other rows, as there is not enough data to display in the hover. After the hover is removed, the browser scrollbars stay (this is not about the hover-SmartGWT-Scrollbars, these are expected).
I do think that the browser scrollbars should not be there in the first place, but if that's not true, they should definitely be removed once the hover disappears.

I think this only happens if the ListGrid is in a window, but I might be wrong here.

Tested with v12.0p_2020-03-11 in current Chromium 84 and Firefox 78 under Win10 in SuperDevMode.

Best regards
Blama

BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.Criterion;
import com.smartgwt.client.data.DSRequest;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.SortSpecifier;
import com.smartgwt.client.types.Autofit;
import com.smartgwt.client.types.GroupStartOpen;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.RecordComponentPoolingMode;
import com.smartgwt.client.types.SortArrow;
import com.smartgwt.client.types.SortDirection;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("Scrollbars generated for tall DataBound hovers, also do no disappear afterwards" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        LGWithhover myListGrid = new LGWithhover();

        VLayout vLayout = new VLayout() {
            {
                addMembers(myListGrid);
            }
        };
        w.addItem(vLayout);
        w.show();
    }

    private class LGWithhover extends ListGrid {

        public LGWithhover() {
            super(DataSource.get("animals"));
            setShowRecordComponents(true);
            setShowRecordComponentsByCell(true);
            setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
            setPoolComponentsPerColumn(true);
            setRecordComponentHeight(22);
            setCanGroupBy(false);
            setCanReorderFields(true);
            setGroupStartOpen(GroupStartOpen.ALL);
            setSortByGroupFirst(true);
            setAllowFilterExpressions(true);
            setHoverWidth(1000);
            // In 12.0. click handler on group icon not working, this command fix problem, the color changes from now on the server side.
            setUseImageForSVG(true);

            setCanEdit(true);
            setShowFilterEditor(true);
            setAutoFetchData(true);
            setSortField("lifeSpan");
            setShowHoverComponents(true);
            setCanHover(true);
            setGroupByField("status");

            ListGridField commonName = new ListGridField("commonName");
            ListGridField status = new ListGridField("status");
            ListGridField lifeSpan = new ListGridField("lifeSpan");

            setFields(commonName, status, lifeSpan);

        }

        @Override
        protected Canvas getCellHoverComponent(Record record, Integer rowNum, Integer colNum) {
            DSRequest requestPropeties = new DSRequest();
            requestPropeties.setShowPrompt(false);
            if (Math.random() > 0.5) {
                setHoverWidth(400);
            } else {
                setHoverWidth(1000);
            }
            Integer lifeSpan = record.getAttributeAsInt("lifeSpan");
            SC.logWarn("lifeSpan: " + (lifeSpan != null ? lifeSpan : "null"));
            SC.logWarn("fieldName: " + colNum + " / " + (getFieldName(colNum) != null ? getFieldName(colNum) : "null"));

            if ("lifeSpan".equals(getFieldName(colNum))) {
                ListGrid lg = new ListGrid(DataSource.get("employees"));
                lg.setWidth(300);
                lg.setAutoFitData(Autofit.VERTICAL);
                lg.setSort(new SortSpecifier("EmployeeId", SortDirection.DESCENDING));
                lg.setShowSortArrow(SortArrow.NONE);
                ListGridField employeeId = new ListGridField("EmployeeId");
                ListGridField name = new ListGridField("Name");
                lg.setFields(employeeId, name);
                // lg.setFetchOperation("delayedFetch");
                lg.fetchData(new Criterion("EmployeeId", OperatorId.LESS_OR_EQUAL, lifeSpan), null, requestPropeties);
                return lg;
            } else {
                return super.getCellHoverComponent(record, rowNum, colNum);
            }
        }
    }

}

[Blama]

Hi Isomorphic,

I just retested without the use of Window - then the bars are generated (not good) and removed again (which was not the case with Window).
To reproduce, again just hover the "999".

Best regards
Blama

BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Criterion;
import com.smartgwt.client.data.DSRequest;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.SortSpecifier;
import com.smartgwt.client.types.Autofit;
import com.smartgwt.client.types.GroupStartOpen;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.RecordComponentPoolingMode;
import com.smartgwt.client.types.SortArrow;
import com.smartgwt.client.types.SortDirection;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;

public class BuiltInDS implements EntryPoint {
    public void onModuleLoad() {
        LGWithhover myListGrid = new LGWithhover();
        myListGrid.setWidth100();
        myListGrid.setHeight100();
        myListGrid.draw();
    }

    private class LGWithhover extends ListGrid {

        public LGWithhover() {
            super(DataSource.get("animals"));
            setShowRecordComponents(true);
            setShowRecordComponentsByCell(true);
            setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
            setPoolComponentsPerColumn(true);
            setRecordComponentHeight(22);
            setCanGroupBy(false);
            setCanReorderFields(true);
            setGroupStartOpen(GroupStartOpen.ALL);
            setSortByGroupFirst(true);
            setAllowFilterExpressions(true);
            setHoverWidth(1000);
            setUseImageForSVG(true);

            setCanEdit(true);
            setShowFilterEditor(true);
            setAutoFetchData(true);
            setSortField("lifeSpan");
            setShowHoverComponents(true);
            setCanHover(true);
            setGroupByField("status");

            ListGridField commonName = new ListGridField("commonName");
            ListGridField status = new ListGridField("status");
            ListGridField lifeSpan = new ListGridField("lifeSpan");

            setFields(commonName, status, lifeSpan);

        }

        @Override
        protected Canvas getCellHoverComponent(Record record, Integer rowNum, Integer colNum) {
            DSRequest requestPropeties = new DSRequest();
            requestPropeties.setShowPrompt(false);
            if (Math.random() > 0.5) {
                setHoverWidth(400);
            } else {
                setHoverWidth(1000);
            }
            Integer lifeSpan = record.getAttributeAsInt("lifeSpan");
            SC.logWarn("lifeSpan: " + (lifeSpan != null ? lifeSpan : "null"));
            SC.logWarn("fieldName: " + colNum + " / " + (getFieldName(colNum) != null ? getFieldName(colNum) : "null"));

            if ("lifeSpan".equals(getFieldName(colNum))) {
                ListGrid lg = new ListGrid(DataSource.get("employees"));
                lg.setWidth(300);
                lg.setAutoFitData(Autofit.VERTICAL);
                lg.setSort(new SortSpecifier("EmployeeId", SortDirection.DESCENDING));
                lg.setShowSortArrow(SortArrow.NONE);
                ListGridField employeeId = new ListGridField("EmployeeId");
                ListGridField name = new ListGridField("Name");
                lg.setFields(employeeId, name);
                // lg.setFetchOperation("delayedFetch");
                lg.fetchData(new Criterion("EmployeeId", OperatorId.LESS_OR_EQUAL, lifeSpan), null, requestPropeties);
                return lg;
            } else {
                return super.getCellHoverComponent(record, rowNum, colNum);
            }
        }
    }

}

[Isomorphic]

This seems to be a report that the browser scrollbars are broken? We know :) That's why we recommend not using them, in fact, 13.0 will now warn you if you haven't turned off browser-level scrolling.

[Blama]

Hi Isomorphic,

yes and no. The problem here is that the browser bars are generated by the browser because the hover-content generated by the framework is too big to fit the screen.
So I think that there is a problem with the browser scrollbars, but this could be circumvented if the framework instead would use framework-level-scrolling here as it does everywhere else as well.
It seems that the generated Hover-ListGrid does not have a reasonable max-height or is positioned too low. As you can see in the screenshot in #1, there are already framework-level-scrollbars for the hover (expected), but there are also unneeded and unwanted browser-level scrollbars.

I do like the warning you plan for 13.0. Anything that advises the developer and/or user of bad settings out of the box like this is highly appreciated.

Best regards
Blama

[Isomorphic]

If you turn off browser scrollbars, does the hover appear to be offscreen?

Because what we would guess is going on here is that you've hit one of many bugs where the native scrollbars think they need to be there, but don't.

[Blama]

Hi Isomorphic,

yes and no. Turn off browser scrollbars really turns them off. The content is still too big anyway, as you can't see the scroll down knob (see picture).
Given the fact that you can't interact with this hover, it does not matter much here, but this will be a problem though with persistent hovers, like here or with the new 13.0 feature.

What I changed compared to #1(!):
In BuiltInDS.html <head> I added:

    <style>
        body
        {
            overflow: hidden;
        }
    </style>

Best regards
Blama

[Isomorphic]

We've fixed this for builds dated July 29 and later

[Isomorphic]

A quick follow-up - note that this only occurs in a situation where the hover is taller than the entire screen and, even then, scrollbars are only transiently present so long as browser-level scrolling isn't used - however, we're now clipping the hover in this case to avoid scrollbars even transiently appearing.

The issue was also present in 12.1 and 13.0, where it manifested slightly differently (the hover did not reposition to the top of the screen) - we've made an additional change for those branches, which you can test out in builds dated July 30 and later.