TabContainer: scroll button incorrectly disabled after selecting pane from menu

[Jason Cowley]

Tested with Dojo/Dijit? 1.10.1 and 1.10.4 in Chrome.

Steps to reproduce:

1. In Chrome open the dijit/tests/layout/TabContainer.html test page.
2. Watch the top tab container example as the page loads.

Expected: Top tab container loads with left-most tab selected.

Actual: It loads with one of the middle tabs selected, then triggers and animation to scroll back to the first tab.

3. Notice that the left scroll button is disabled.
4. Click the drop-down arrow and select the last tab "newTab2".

Expected: newTab2 is selected and the tabs scroll so that it becomes visible on the right-side of the tab container. The left scroll button should become enabled.

Actual: newTab2 is selected but is scrolled to the centre of the tab container and the left scroll button is still disabled, so you cannot scroll left with the scroll button.

This test page behaves correctly in Dojo 1.9.2.

[bill]

That's an automated test, and it's behaving correctly. The scrolling is caused by the test code inside the TabContainer?.html files that selects various tabs.

[Jason Cowley]

Hi Bill,

I don't think you understand the problem. See the expected and actual description after step 4.

Expected: newTab2 is selected and the tabs scroll so that it becomes visible on the right-side of the tab container. The left scroll button should become enabled.

Actual: newTab2 is selected but is scrolled to the centre of the tab container and the left scroll button is still disabled, so you cannot scroll left with the scroll button.

You end up with the left scroll button disabled, even though the tabs are scrolled to the right. This problem was discovered in our application, and I managed to reproduce it on the test page. It has nothing to do with the automation.

Jason

[bill]

OK, it turns out you are describing two separate issues in this ticket.

I reproduce the second problem you describe, about manually selecting newTab2 from the menu.

Not the first problem though. The top TabContainer? correctly loads with the left-most tab selected, and there's no animation. You can see this more clearly by commenting out doh.run() and replacing it with parser.parse().

[bill]

Looks like the second problem started with the changes to _TabContainerBase.js in ​https://github.com/dojo/dijit/commit/df83f09c02ffdb0aa7ee77ae4da20e04e2f949d8, to fix #17287.

TabContainer#selectChild() now has code to focus the tab button for the selected tab:

selectChild: function(/*dijit/_WidgetBase|String*/ page, /*Boolean*/ animate){
        // Override _StackContainer.selectChild() so the page's focus isn't left in a strange state.

        if(this._focused){
                // Focus must be inside the currently selected tab,
                // or on the currently selected tab label.
                page = registry.byId(page);
                this.tablist.pane2button(page.id).focus();
        }
        return this.inherited(arguments);
}

The call to focus() effectively cancels the animation, because in ScrollingTabController#onSelectChild(), the code inside the if() isn't triggered:

if(sl > node.offsetLeft ||
        sl + domStyle.get(this.scrollNode, "width") <
                node.offsetLeft + domStyle.get(node, "width")){
        this.createSmoothScroll().play();
}

[Bill Keese <[email protected]…>]

In 2f9852284d80534033dcc510b2c984c4f254f042/dijit:

Error: Processor CommitTicketReference failed

Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

[Bill Keese <[email protected]…>]

In c263d8c4a7021171a7f9649898637073d1cabe07/dijit:

Error: Processor CommitTicketReference failed

Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled?