Tabset reordering issue

[pavel.benes]

Hello Isomorphic,

I have encountered an issue with Tabs reordering within a Tabset with addTabButton present.
With this setup, I am able to drag reposition a tab beyond the addTab button. On top of that, selecting the moved tab throws an exception and unexpected things happen with its associated pane.

Here is a test case which is just a slightly modified 'Closeable Tabs' showcase (https://www.smartclient.com/smartgwt...tabs_closeable):

public void onModuleLoad() {
    final TabSet topTabSet = new TabSet();
    topTabSet.setCanReorderTabs(true);
    topTabSet.setCanAddTabs(true);
    topTabSet.setTabBarPosition(Side.TOP);
    topTabSet.setTabBarAlign(Side.LEFT);
    topTabSet.setWidth(600);
    topTabSet.setHeight(200);

    Tab tTab1 = new Tab("Blue");
    tTab1.setCanClose(true);
    Canvas c1 = new Canvas();
    c1.setBackgroundColor("blue");
    tTab1.setPane(c1);

    Tab tTab2 = new Tab("Green");
    Canvas c2 = new Canvas();
    c2.setBackgroundColor("green");
    tTab2.setPane(c2);

    topTabSet.addTab(tTab1);
    topTabSet.addTab(tTab2);

    HLayout buttons = new HLayout();
    buttons.setMembersMargin(15);

    IButton addButton = new IButton("Add Tab");
    addButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            String title = topTabSet.getTabs().length % 2 == 0 ? "Yellow" : "Green";
            String iconType = topTabSet.getTabs().length % 2 == 0 ? "pawn" : "cube";
            Tab tTab = new Tab(title);
            tTab.setCanClose(true);
            Canvas c = new Canvas();
            c.setBackgroundColor(title.toLowerCase());
            tTab.setPane(c);
            topTabSet.addTab(tTab);
            // Select the newly created Tab
            topTabSet.selectTab(tTab);
        }
    });

    IButton removeButton = new IButton("Remove Tab");
    removeButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            topTabSet.removeTab(topTabSet.getTabs().length - 1);
        }
    });

    buttons.addMember(addButton);
    buttons.addMember(removeButton);

    VLayout vLayout = new VLayout();
    vLayout.setMembersMargin(15);
    vLayout.addMember(topTabSet);
    vLayout.addMember(buttons);
    vLayout.setHeight("auto");

    vLayout.draw();
}

Basically, the only real change is the addition of

topTabSet.setCanReorderTabs(true);
topTabSet.setCanAddTabs(true);

Exception thrown when selecting the tab:

WARN:Log:TypeError: Cannot read property 'pane' of undefined
Stack from error.stack:
TabSet._tabSelected(<no args: exited>) on [TabSet ID:isc_TabSet_0] @ ISC_Containers.js:373:12
_3.buttonSelected(<no args: exited>) on [TabBar ID:isc_TabSet_0_tabBar] @ ISC_Containers.js:296:596
_3.setSelected(<no args: exited>) on [SimpleTabButton ID:isc_Tab_3] @ ISC_Foundation.js:609:42
StatefulCanvas.select(<no args: exited>) on [SimpleTabButton ID:isc_Tab_3] @ ISC_Foundation.js:181:150
StatefulCanvas.handleActivate(<no args: exited>) on [SimpleTabButton ID:isc_Tab_3] @ ISC_Foundation.js:233:149
StatefulCanvas.handleClick(<no args: exited>) on [SimpleTabButton ID:isc_Tab_3] @ ISC_Foundation.js:235:13
[c]Class.invokeSuper(<no args: exited>) on [SimpleTabButton ID:isc_Tab_3] @ ISC_Core.js:313:93
[c]Class.Super(<no args: exited>) on [SimpleTabButton ID:isc_Tab_3] @ ISC_Core.js:305:170
_3.handleClick(<no args: exited>) on [SimpleTabButton ID:isc_Tab_3] @ ISC_Containers.js:46:135
[c]EventHandler.bubbleEvent(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:2134:89
[c]EventHandler.handleClick(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:1974:50
EventHandler._handleMouseUp(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:1959:11
[c]EventHandler.handleMouseUp(<no args: exited>) on [Class EventHandler] @ ISC_Core.js:1950:57
[c]EventHandler.dispatch(_1=>[c]EventHandler.handleMouseUp(), _2=>[object MouseEvent]) on [Class EventHandler] @ ISC_Core.js:2221:108
HTMLDocument.eval(event=>[object MouseEvent]) @ [no file]:3:123

Observed in Chrome 73.0.3683.86
SmartClient Version: v12.0p_2018-08-25/Pro Deployment (built 2018-08-25)

Yes, the SmartGWT version is a bit outdated, but the latest issue regarding reordering in a tabset is from the beginning of 2017
(https://forums.smartclient.com/forum...add-tab-button).
But if this issue has been addressed in any later version, let me know and I will retest this.

Thanks

[pavel.benes]

Retested with SmartClient Version: v12.0p_2019-04-01/Pro Deployment (built 2019-04-01).
Still no luck, behaviour is the same.

[Isomorphic]

We aren't seeing a crash running your sample against latest 12.0 - in our testing, we aren't able to drop a tabButton to the right of the addTab button.

In fact, what we *do* see is an issue where you can't drag a tabButton to the spot right *before* the addTab button - so you can drag the right-most tabButton to the left, but can't drag it back to the right again. This is fixed for tomorrow's builds.

If you tested the latest version and still saw these issues, please ensure you've cleared the gwt and browsers caches - and failing that, let us know your skin and browser details.

[pavel.benes]

Right, I will take a look into it.
But just to make sure, from my testing it seems this bug can only happen if you try to move a tab beyond the add tab button right away; meaning that no two tabs were swapped beforehand.
It seems that if I do swap any two tabs before i try to move a tab beyond the add tab button, it won't bug out.
So i guess the most reliable way to test this would be to try and drag the rightmost tab beyond the add tab button right after the page has loaded.
Can you please confirm that even after taking this step you are not able to reproduce the bug?

And while I'll try to investigate what could cause this bug on our end, is there anything that comes to mind, which could cause such issue (eg. in our skin)?

Thanks for a reply

[Isomorphic]

With your sample-code exactly as-is, and as the first action after a page load, we aren't able to drag the right-most tab further to the right. Are you saying that you see this happen *with the sample code you posted* against the latest 12.0?

Which browser/version are you using? Which skin?

[pavel.benes]

Right.
With v12.0p_2019-04-01/Pro Deployment (built 2019-04-01) AND the Enterprise skin I could still reproduce the problem in Chrome (73.0.3683.103 64bit).
However, after updating to v12.0p_2019-04-10/Pro Deployment (built 2019-04-10) I was no longer able to reproduce it with the Enterprise skin nor with our own skin.

So I guess this issue could be deemed resolved.