ListGrid editing issue(s) in 12.0

[markok]

Hello,

SmartClient Version: v12.0p_2019-04-03/LGPL Development Only (built 2019-04-03), SmartGWT 12.0/LGPL
Chrome Version 73.0.3683.86 (Official Build) (64-bit) on Mac & Windows, appears on latest Firefox too

We have ListGrids using record components which our users use to edit some data. We have encountered an issue related to the browser's zoom setting which breaks the editing of the grid. We know the issue is related to browser zoom and we know the browser zoom related issues are hard or impossible to fix. We decided to report this problem because our users are experiencing significant trouble with this, this error was not present earlier and is of functional type.

With an editable ListGrid, we see that the cell focus (tab index) does not work correctly when the browser is zoomed. Also, the content of cells is lost on new records and on the row which is selected. The problem is somehow related to record components embedded in the cells or, at least the problem goes away if we remove all record components from the grid.

The problem is reproducible with the following test case (instructions will follow):

public void doOnModuleLoad() {
    viewport = new VLayout();
    viewport.setWidth100();
    viewport.setHeight100();

    // our simple testing ds with some testing data
    final DataSource ds = new DataSource();
    ds.setID("myDS");
    DataSourceIntegerField f1 = new DataSourceIntegerField("f1");
    f1.setPrimaryKey(true);
    f1.setHidden(true);
    DataSourceTextField f2 = new DataSourceTextField("f2", "f2", 20000);
    DataSourceTextField f3 = new DataSourceTextField("f3", "f3", 20000);
    ds.setFields(f1, f2, f3);
    ds.setClientOnly(true);

    final ListGridRecord r1 = new ListGridRecord();
    r1.setAttribute("f1", 1);
    r1.setAttribute("f2", "first value");
    r1.setAttribute("f3", "second value");
    final ListGridRecord r2 = new ListGridRecord();
    r2.setAttribute("f1", 2);
    r2.setAttribute("f2", "third value");
    r2.setAttribute("f3", "fourth value");

    ds.setTestData(r1, r2);

    // our editable grid in saveLocally mode

    final ListGrid g = new ListGrid() {
        @Override
        protected Canvas createRecordComponent(ListGridRecord r, Integer col) {
            // create a record component to cell nr 3
            if(col == 2) {
                // by commenting this out, everything works
                return new Label("a component here");
            }
            return null;
        }
    };

    g.setAutoSaveEdits(false);
    g.setDataSource(ds);
    g.setAutoFetchData(false);
    g.setSaveLocally(true);

    g.setCanEdit(true);
    g.setEditByCell(false);
    g.setEditEvent(ListGridEditEvent.DOUBLECLICK);
    g.setSelectionType(SelectionStyle.SINGLE);
    g.setShowRecordComponents(true);
    g.setShowRecordComponentsByCell(true);

    // two text cols & component col

    ListGridField gf2 = new ListGridField("f2");
    AutoFitTextAreaItem aEditor = new AutoFitTextAreaItem();
    gf2.setEditorProperties(aEditor);
    gf2.setCanEdit(true);

    ListGridField gf3 = new ListGridField("f3");
    AutoFitTextAreaItem bEditor = new AutoFitTextAreaItem();
    gf3.setEditorProperties(bEditor);
    gf3.setCanEdit(true);

    ListGridField gcf = new ListGridField("gcf");
    gcf.setCanEdit(false);

    g.setFields(gf2, gf3, gcf);

    // fetch data to grid
    ds.fetchData(new Criteria(), new DSCallback() {
        @Override
        public void execute(DSResponse dsResponse, Object data, DSRequest dsRequest) {
            g.setData(dsResponse.getData());
        }
    });

    viewport.addMember(g);

    // button to add new rows
    Button b = new Button("new row");
    b.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent clickEvent) {
            // add a new row
            ListGridRecord newRecord = new ListGridRecord();
            g.addData(newRecord);
            g.selectSingleRecord(newRecord);
            g.startEditing(g.getRecords().length - 1, 0, false);
        }
    });
    viewport.addMember(b);
    viewport.draw();
}

To reproduce:

1. Zoom the browser a bit, for example, 110% or 125%
2. Click "new row" button (notice that the first cell of the row is not automatically focused & editable)
3. Click the first cell of the new row
4. Enter some text, press tab to move to the next cell (notice that the content of the first cell disappears (?))
5. Click the first column of the first row
6. Tab forward in the grid to the next row (notice that the cell contents gets cleared when the new row is selected)

7. Zoom the browser to actual size (100%) and notice, that the problems go away
8. Comment out the "return new Label("a component here");" line from the code, and notice that the problems go away even in the zoomed mode

We have debugged the problem a bit and we see some weird behavior in the TabIndexManager when the grid tries to move the focus to and from the record component (A Label in this example). We have no idea if the problems presented in the editing of the grid are related to this.

If the only problem we would see here would be non-working tab indexes or something it would not be so bad. But the disappearing content and such is very troubling for some users. Any help or a possible workaround would be greatly appreciated.

[Isomorphic]

It looks like you may not have read the browser zoom overview in the docs.

For Chrome there are unfortunately multiple intractable browser bugs, which we document - your best option is to "star" such bugs in hopes that they will be addressed. It is unsurprising that these bugs affect focus, as the browser will automatically scroll things onscreen in response to focus movement, and zoom issues can create mis-sizing that places elements slightly offscreen.

For Firefox we document that it's necessary to reload the page if zoom is changed. You haven't mentioned if you've done this.

[markok]

Hello,

Actually, we have read the docs. In the documentation, you state that if the problems related to browser zoom are of functional type (not just cosmetic), you'll at least investigate the issue if the issue is reproducible. If this is not the case, you'd probably like to update the documentation.

I have to say that we also wouldn't be investigating this issue if we would see the issue as purely cosmetic and not relevant. Though, the zoom feature in the browsers works very well - typically - and as a note, users seem to be using it very often. The clearing cells and such might be interpreted as destruction of data which at least our clients take quite seriously.

To answer your question about Firefox, yes, the problem occurs even if we (re)load the page with the set zoom level.

We will try to investigate this issue and probably have to rely on some dirty JSNI patching to get this to work, which we would absolutely like to avoid for maintainability. I have to stress the fact that this has always worked before and broke in the builds early this year. If you are interested, we've tested the problem with various builds from 12.0p branch and our results are as follows:

Build 2019-01-05: Everything works ok, zoomed or not.
Build 2019-01-12: This build breaks things. The grid problems which our test case reproduces appear on ALL zoom levels (even in actual size).
...
In the builds between, the most problems persist. Some builds (for example in 2019-02-09) the clearing of existing focused cells does not happen but the clearing of the new row still does (?).
...
Build 2019-03-16: This is the first build where the 100% zoom level works again, still in the zoomed mode the problems persist.
-> Same for all subsequent builds.

[markok]

To report back on this problem, we've incorporated a patch to our app by replacing the

- ListGrid.refreshCellValue and
- ListGrid.GridBody.refreshCellValue

.. methods to the 2019-04-03 build with variants from the last fully working nightly 2019-01-05. We are still to make extensive testing on this but the first impression is that it fixes all the issues and appears to work OK with record components and also in zoomed mode. Our patch is horrible code because of the fact that the logic uses many internal methods which we cannot reliably overload using JSNI and probably prevents us from upgrading the framework without significant effort (because of obfuscated code). We are still to decide if we incorporate this patch to the mainline build of our app.

We did not investigate what has actually changed in these methods. We just noticed that these methods were updated in the 2019-01-12 build which broke the grid editing (also in 100% actual size zoom) and tried replacing them.

By a quick look of the code in these methods there were no major changes apart from the fact that much of the logic was switched around in these methods - the code from GridBody was moved toe ListGrid and vice versa. We don't know why this was done and it might be good idea to look again into this code because as I see this, this changes how the ListGrid.refreshCell-method works quite significantly because the refreshCell-method calls the of refreshCellValue method from ListGrid (instead of body where the logic has been moved). This might be intentional, we don't know.