Skip to content

Fixed #6125 - Incorrect selection of tab on init with hash in url and misordered divs #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Fixed #6125 - Incorrect selection of tab on init with hash in url and misordered divs #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion tests/unit/tabs/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ <h2 id="qunit-userAgent"></h2>
<li><a href="#colon:test"><span>1</span></a></li>
<li><a href="#inline-style"><span>2</span></a></li>
<li><a href="data/test.html#test"><span>3</span></a></li>
<li><a href="data/test.html" title="∫ßáö Սե"<span>4</span></a></li>
<li><a href="data/test.html" title="∫ßáö Սե"><span>4</span></a></li>
</ul>
<div id="colon:test"></div>
<div style="height: 300px;" id="inline-style"></div>
Expand Down Expand Up @@ -107,6 +107,14 @@ <h2 id="qunit-userAgent"></h2>
<div id="tabs6-1"></div>
<div id="tabs6-2"></div>
</div>
<div id="tabs7">
<ul id="tabs7-list">
<li><a href="#tabs7-1">1</a></li>
<li><a href="#tabs7-2">2</a></li>
</ul>
<div id="tabs7-2"></div>
<div id="tabs7-1"></div>
</div>
</div>
</body>
</html>
36 changes: 36 additions & 0 deletions tests/unit/tabs/tabs_methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,42 @@ test('init', function() {
equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 1, 'second panel should be hidden' );
});

test('init with hash', function() {
expect(5);

//set a hash in the url
location.hash = '#fragment-2';

//selection of tab with divs ordered differently than list
el = $('#tabs1').tabs();

equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');

ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
ok($('#tabs1 div:eq(0)').is('.ui-tabs-hide'), 'first div for first tab should be hidden');

ok($('#tabs1 ul li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active');
ok(!$('#tabs1 div:eq(1)').is('.ui-tabs-hide'), 'second div for second tab should not be hidden');
});

test('init mismatched order with hash', function() {
expect(5);

//set a hash in the url
location.hash = '#tabs7-2';

//selection of tab with divs ordered differently than list
el = $('#tabs7').tabs();

equals(el.tabs('option', 'selected'), 1, 'second tab should be selected');

ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
ok($('#tabs7 div:eq(1)').is('.ui-tabs-hide'), 'second div for first tab should be hidden');

ok($('#tabs7-list li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active');
ok(!$('#tabs7 div:eq(0)').is('.ui-tabs-hide'), 'first div for second tab should not be hidden');
});

test('destroy', function() {
expect(6);

Expand Down
4 changes: 2 additions & 2 deletions ui/jquery.ui.tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,13 +210,13 @@ $.widget( "ui.tabs", {
this.lis.removeClass( "ui-tabs-selected ui-state-active" );
// check for length avoids error when initializing empty list
if ( o.selected >= 0 && this.anchors.length ) {
this.panels.eq( o.selected ).removeClass( "ui-tabs-hide" );
$( self._sanitizeSelector( self.anchors[ o.selected ].hash ) ).removeClass( "ui-tabs-hide" );
this.lis.eq( o.selected ).addClass( "ui-tabs-selected ui-state-active" );

// seems to be expected behavior that the show callback is fired
self.element.queue( "tabs", function() {
self._trigger( "show", null,
self._ui( self.anchors[ o.selected ], self.panels[ o.selected ] ) );
self._ui( self.anchors[ o.selected ], $( self._sanitizeSelector( self.anchors[ o.selected ].hash ) ) ) );
});

this.load( o.selected );
Expand Down