Material: ui-sref on md-tab no longer works

[seiyria]

This used to work in 0.8.0:

      md-tabs.is-flex.auto-flex.md-accent(md-selected="selectedIndex",layout="column")
         md-tab(ui-sref="player.overview",label="Player")
            div.tab(ui-view="overview")

It no longer works as of 0.9.0-rc1. It seems extra attributes are being stripped off of these directives.

[sunny9240]

+1

[DBGTTECHJAM]

Yes we are having same issue since upgrading to 0.9.0-rc1. This fix is necessary for Tabs with external view content to work.

[ThomasBurleson]

@DBGTTECHJAM - agreed. Support for external view content is very important.
@seiyria - Please provide a CodePen or Plunkr that demonstrates this issue.

[em2labs]

I am able to replicate the problem as well. I created a plunker to replicate the problem:

http://plnkr.co/edit/t0QmjueSGcNfFLG8U0n2?p=info

I first got it working with angular-material 0.8.3 and then switched to 0.9.0-rc1 in order to replicate the issue. This is my first time getting involved so please let me know if additional info is necessary... and thank you for the great libraries.

[FelAmine]

+1

[epelc]

+1

The following use to work quite nicely

<md-tab label="Something cool" ui-sref="something.cool"></md-tab>

But now I have to use the following(note the ui-sref must be on an element within md-tab-label`

<md-tab>
    <md-tab-label><span ui-sref="something.cool">Something cool</span></md-tab-label>
</md-tab>

[seiyria]

+1 for the workaround. Guess I'll have to go with that for now.

[em2labs]

Thanks for the workaround.

[eclipse1985]

+1

[loykianos]

you can also try adding something like { padding: 15px; margin: -15px; } on the label so that the lnk works for the whole tab and not only the text. yeah, don't judge me.

[ThomasBurleson]

@loykianos - LOL.
RE don't judge me > We don't... thank you for the interim workaround.

[averas]

Side note: The workaround does not solve keyboard navigation.

[dohomi]

+1 for making tabs work with any route persistancy that a user would open a specific tab on historyBack()

[JNissi]

+1

[gpopovic]

+1

[rosinghal]

i am using this code.

<md-tabs>
   <md-tab md-on-select="$state.transitionTo(state1, params1)"><md-tab-label>Label1</md-tab-label></md-tab>
   <md-tab md-on-select="$state.transitionTo(state2, params2)"><md-tab-label>Label2</md-tab-label></md-tab>
</md-tabs>
<div ui-view></div>

Its working fine, till now.

[ThomasBurleson]

@rosinghal - can you provide a CodePen that we can quickly use to test and validate fixes?

[ask007learning]

+1

[ismarslomic]

+1

[rosinghal]

@ThomasBurleson : Here it is http://codepen.io/rosinghal/pen/waGozW & http://codepen.io/rosinghal/pen/JdXbMz

[bastienJS]

When you try to activate a state "settings" via a navbar button then the "settings" Tab is not activated. I have extra to click on that Tab. This should be fixed too.

And the workaround from @epelc does NOT work see the plunker with latest version 0.9.4

http://plnkr.co/edit/kmQh5tWiMM3em5zgbB4a?p=preview

[tazmon95]

Thanks for the workaround!!!

[JNissi]

@bastienJS: It seems your ui-view structure is not working for some reason. I simplified your plunker by removing the named views inside the tabs and the workaround by @epelc works just fine: http://plnkr.co/edit/WVsbSHfplx82FXywYq2G

[bastienJS]

@Jnissi Thanks.

ONE bug stays... when you change the route between tab1 and tab2 the content changes, but not the selected tab HAHA.

[mprentic-harris]

This is very helpful. Thank you!

[bastienJS]

Please add this change to the changelog: https://github.com/angular/material/blob/master/CHANGELOG.md
I can not find it there, but I assume it belongs there? :-)

[robertmesserle]

It's in there under bug fixes for 0.9.7

[bastienJS]

oh Danke. You really did some quick releases within a week.

[MrBlenny]

One of the main ideas behind ui-sref is that it adds a href meaning the tabbed states are crawlable.

It looks like the current implementation offloads the state change to a standard click bind meaning the tabs can't be crawled.

[zakhenry]

@seiyria off topic, but what language have you written the original template question in? It looks like it compiles to html? I want that!

[seiyria]

I wrote it with jade.

[tmhilton]

This looks very promising. However, I want to take it a bit further and navigate to a tab via a link (in the left nav, specifically) to one of the tabs on another page. Here is a simple example of what I am trying to do. As @bastienJS noted the content changes but the tab doesn't. Any suggestions on how to make this work?

[osuritz]

Issue is only partly fixed when a user clicks the tab. If you use the keyboard to navigate between tabs, pressing the space bar to activate a tab, it still doesn't work with ui-sref. Other tabs that don't use ui-sref work fine.

I suspect that https://github.com/angular/material/blob/master/src/components/tabs/js/tabsController.js#L277 should be more along the lines of

if (!locked) {
  select(ctrl.focusIndex);
}

This would leverage the fix https://github.com/angular/material/commit/6c53d1127fc1cb7d2a86802e5831642a40ff1e41 mentioned above.

[xsegrity]

@osuritz is right about the keyboard navigation not syncing when using ui-sref. His proposed fix works as well. I am having the same problem. Going to open a separate issue since this one is closed already.

[ThomasBurleson]

@robertmesserle: see @osuritz comment above ^^.

[MileanCo]

I was able to fix this by using ng-click and then changing the $location with a function:

md-tab ng-click="goToTab(currentTab)" label="Profile"

  $scope.goToTab = function (tab) {
              $location.url("/dashboard/profile");

With:

// Set 'selectedTab' for highlight/underscore [DOES NOT CHANGE STATE]
    $scope.$on('$stateChangeSuccess', function (event, toState) {
      $scope.currentTab = toState.data.selectedTab;
    });

And route .state data:

data: {
            'selectedTab': 0,
          },

[invincibledudess]

I am facing the same Keyboard navigation issue (The tab content does not change with keyboard 'enter'/'space' with 'ui-sref'). No workaround is working for me as well. Any updates as to when will this be fixed?

[timc13]

+1