[bug] Key "tab" is not work correctly with CanvasItem in ListGrid inline editing

[antanas.arvasevicius]

Hi,

I've a problem with inline ListGrid editing, if one of field is custom CanvasItem then it breaks focus navigation with "tab" button. It just focus on a first widget on screen.
My custom CanvasItem contains DynamicForm with two more fields (but with one field it doesn't work either).

Tested latest version: v10.0p_2015-11-29/LGPL Deployment but doesn't work on 2015-07-xx build too.

Debug information: Then I press "tab" while I have focus in my second field of "CustomCanvasItem", then system reacts as follows:

1) isc.EventHandler.addClassMethods.handleKeyPress(), ISC_Core.js:33582
find that button "Tab" pressed, and ckickMaskUp() exists with topHardMask, and has focusCanvas, then call focusInNExtTabElement() on that canvas.

2) isc.CanvasItem.addProperties._canvas_focusInNextTabElement(), ISC_Forms.js:35094
Check is our canvas is instance of DynamicForm and delegate to DynamicForm.focusInNextTabElement();

3) isc.DynamicForm.addMethods._focusInNextTabElement(), ISC_Forms.js:13228 (it's our CanvasItem's form)
We've reached the end of all our items and try to focus on next widget instead of item

4) isc.Canvas.addMethods._focusInNextTabElement(), ISC_Core.js:65293
just forward to DynamicForm

5) isc.DynamicForm.addMethods._focusInNextTabElement(), ISC_Forms.js:13168 (it's ListGrid's edit form)
Here is on first lines there is check condition if target is masked then skip logic, and go to next widget instead.
Because we have a hardmask this logic will be triggered and no more default "focus to next item" behaviour.

If I am removing that checking mask condition then all steping to next field behaviour starts work correctly.
I know that it's not correct way to fix, but I hope this would be enough information to quickly find a problem.

PS. If I do not use Window isModal:true, then there is no hard mask all and logic will be skipped on 1) step.


Here is a small demo what I'm talking about: just focus on first inline item and then press Tab multiple times.

    isc.ClassFactory.defineClass("CustomCanvasItem", "CanvasItem");
    isc.CustomCanvasItem.addMethods({
        createCanvas: function () {
            var inputBoxProperties = isc.addProperties({ID: this.ID + "_doubleItem"}, {
                name: "amount",
                autoDraw: false, ceator: this, _autoAssignedName: true, showTitle: false,
                textAlign: "right", width: "*", showHint: false, validateOnChange: true
            });

            var currencySelectItemProperties = isc.addProperties({ID: this.ID + "_comboBox"}, {
                name: "currency",
                autoDraw: false, creator: this, _autoAssignedName: true, showTitle: false, width: "*"
            });

            return this.createAutoChild("inputForm", {
                _constructor: "DynamicForm",
                autoDraw: false,
                writeFormTag: false,
                width: "*",
                colWidths: ['*', '*'],
                autoParent: "none",
                numCols: 2,
                minColWidth: 0,
                flattenItems: true,
                overflow: "hidden",
                cellPadding: 0,
                items: [inputBoxProperties, currencySelectItemProperties]
            });
        }
    });

    isc.Window.create({
        width: 1200, height: 910, autoCenter: true,
        //  this option set will affect  handleKeyPress(): line: "if (this.clickMaskUp() && lastEvent.keyName == this._$Tab) {"
        //  and at that line will be triggered "_canvas_focusInNextTabElement".
        isModal: true,
        //------ without these arguments no any handlers will be triggered on "tab" at all.
        items: [
            isc.ListGrid.create({
                autoDraw: false,
                canEdit: true,
                alwaysShowEditors: true,
                width: "100%",
                fields: [{name: 'a'}, {name: 'b'},{name: 'c', editorType: "CustomCanvasItem"},{name: 'd'}],
                data: [{}]
            })
        ]
    });

If you need any additional info just ask :)

[Isomorphic]

First we'd recommend getting rid of the undocumented properties like "writeFormTag" and "_autoAssignedName", which could be contributing, as well as using "creator" on instances that are not AutoChildren.

validateOnChange also doesn't make sense for a sub-item here - you'll end up signalling errors such that they exist only within your sub-form, and are not propagated to the containing grid or form at all.

Finally, we'd recommend turning off alwaysShowEditors mode. Due to a plethora of browser bugs around focus management, this mode is very difficult to make work with the built-in FormItems; with a custom FormItem like yours it's probably not feasible at all.

[antanas.arvasevicius]

Hi, thank you for your comments,
It's was copy pasted from some internal SmartClient FormItem these writeFormTag _autoAssignedName and others, I'll remove them.
I've removed " alwaysShowEditors: true," but problem still there.
Still, you didn't answered me anything about a problem I've written about.

I've stripped anything specific for our project, you can reproduce that incorrect "tab" behaviour by using that code below:

    isc.Window.create({
        width: 1200, height: 910, autoCenter: true,
        //  this option set will affect  handleKeyPress(): line: "if (this.clickMaskUp() && lastEvent.keyName == this._$Tab) {"
        //  and at that line will be triggered "_canvas_focusInNextTabElement".
        isModal: true,
        //------ without these arguments no any handlers will be triggered on "tab" at all.
        items: [
            isc.ListGrid.create({
                autoDraw: false,
                canEdit: true,
                width: "100%",
                fields: [{name: 'a'}, {name: 'b'},
                    {
                        name: 'c',
                        editorType: "CanvasItem",
                        editorProperties: {
                            createCanvas: function () {
                                return isc.DynamicForm.create({
                                    autoDraw: false,
                                    items: [{name:'item1', showTitle: false},
                                                {name:'item2', showTitle: false}]
                                });
                            }
                        }
                    },
                    {name: 'd'}],
                data: [{}]
            })
        ]
    });

[antanas.arvasevicius]

Hi, Isomorphic,
will you consider to look at this issue? Or I should fix it by myself?

[antanas.arvasevicius]

any news?

[Isomorphic]

We've just added some changes to better handle this case. Please try the next nightly build, dated Dec 15 or above. Changes have been applied to the 10.0 and 10.1 branch

Regards
Isomorphic Software

[antanas.arvasevicius]

Hi, Isomorphic,

I can confirm that this issues is completely fixed. Window can be modal, or not modal, or ListGrid not on Window "tab" "shift-tab" navigation works correctly.

Thank you!