Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#18535 closed defect (fixed)

TabContainer: scroll button incorrectly disabled after selecting pane from menu

Reported by: Jason Cowley Owned by: bill
Priority: undecided Milestone: 1.10.5
Component: Dijit Version: 1.10.4
Keywords: Cc:
Blocked By: Blocking:

Description

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.

  1. Notice that the left scroll button is disabled.
  2. 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.

Change History (7)

comment:1 Changed 4 years ago by bill

Resolution: invalid
Status: newclosed

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.

comment:2 Changed 4 years ago by 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

comment:3 Changed 4 years ago by bill

Resolution: invalid
Status: closedreopened

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().

Last edited 4 years ago by bill (previous) (diff)

comment:4 Changed 4 years ago by 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();
}
Last edited 4 years ago by bill (previous) (diff)

comment:5 Changed 4 years ago by bill

Milestone: tbd1.10.5
Status: reopenedassigned
Summary: dijit/layout/TabContainer regression in 1.10.xTabContainer: scroll button incorrectly disabled after selecting pane from menu

comment:6 Changed 4 years ago by Bill Keese <bill@…>

Resolution: fixed
Status: assignedclosed

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? 

comment:7 Changed 4 years ago by Bill Keese <bill@…>

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? 
Note: See TracTickets for help on using tickets.