Semantic-ui: [Tab] changing tab with javascript doesn't change connected tab item

[larsbo]

Changing the active tab with

$.tab('change tab', 'tab name');

has only effect on the tab content but not the connected tab item:
https://jsfiddle.net/uuz0tpws/

edit: fixed jsfiddle (semantic ui resource broken)

[larsbo]

After analyzing the source code I figured out that it works correctly if you run the function on the selection of available tab items instead of the global $context:

$('.ui.menu').find('.item').tab('change tab', 'second')

See the example here: https://jsfiddle.net/wtbkfspe/

But I guess it's a bug that you have to specify the array of tab menu items to change both the content and the corresponding navigation item (preventing an inconsistent state)?

edit: fixed jsfiddle (semantic ui resource broken)

[larsbo]

Me again...
I read the documentation for tabs again and this time I stumbled over the menu item selector in this section: http://semantic-ui.com/modules/tab.html#with-menus
This indeed makes clear that my described observation is the desired bahavior :hushed:
I don't understand why the item selector is needed in this situation because we already have the connection between content and navigation item (the metadata data-tabattribute)?

[jlukic]

Thanks for making this clear for other users. Generally $.tab in the global scope has no knowledge of tabbable components on the page, you have to invoke methods on the associated DOM element.

[larsbo]

@jlukic I understand the concept but why did you have made the decision to specify the associated dom element when activating the tab programmatically? It should be easy to also activate the corresponding tab item with

$.tab('change tab', 'tab-name');

without loss of performance (because tab connection between tab item and tab content has already been creating during initalization by

$('.tabular.menu .item').tab();

I would prefer this as the default behaviour especially as the documentation says "Tabs are usually used in concert with an element that activates the tab.".

Just my opion on the subject :smiley:

[corinroyal]

I'm so glad I found this post. The tabs documentation page is not at all clear on the subject. I've spent days trying to figure out how to link to a tab. It's working now, thanks to this post, but I still don't really get it.

[DePalmo]

I agree with @larsbo and thanks for pointing this out. I had an issue where tab changed, but not the associated menu and event onLoad didn't fire, now it does.

How tabs are currently handled is not something one would expect. If we have an option to $.tab('change tab','tab name'), at least I would expect that it would trigger associated menu item and events attached.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[larsbo]

this should not be staled

[reoxb]

OMG! doesn't work!

[llturro]

Seeing the documentation, the 'change tab' behavior is to be used when 'No menus' defined. The example in Fiddle has menus. You can simulate changing-tab-menu adding these two lines:

$('.menu .item[data-tab="first"]').removeClass("active");
$('.menu .item[data-tab="second"]').addClass("active");

[gurpreet91]

($('.menu .item')).tab('change tab', 'tab-name');