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.

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

ui-sref on md-tab no longer works #2344

Closed
seiyria opened this Issue Apr 15, 2015 · 38 comments

Comments

Projects
None yet
@seiyria

seiyria commented Apr 15, 2015

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

This comment has been minimized.

sunny9240 commented Apr 17, 2015

+1

@DBGTTECHJAM

This comment has been minimized.

DBGTTECHJAM commented Apr 18, 2015

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

This comment has been minimized.

Contributor

ThomasBurleson commented Apr 18, 2015

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

@em2labs

This comment has been minimized.

em2labs commented Apr 18, 2015

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

This comment has been minimized.

FelAmine commented Apr 18, 2015

+1

@epelc

This comment has been minimized.

Contributor

epelc commented Apr 18, 2015

+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

This comment has been minimized.

seiyria commented Apr 19, 2015

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

@em2labs

This comment has been minimized.

em2labs commented Apr 19, 2015

Thanks for the workaround.

@eclipse1985

This comment has been minimized.

eclipse1985 commented Apr 20, 2015

+1

@loykianos

This comment has been minimized.

loykianos commented Apr 20, 2015

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

This comment has been minimized.

Contributor

ThomasBurleson commented Apr 20, 2015

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

@averas

This comment has been minimized.

averas commented Apr 24, 2015

Side note: The workaround does not solve keyboard navigation.

@dohomi

This comment has been minimized.

dohomi commented Apr 30, 2015

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

@JNissi

This comment has been minimized.

JNissi commented May 9, 2015

+1

1 similar comment
@gpopovic

This comment has been minimized.

gpopovic commented May 12, 2015

+1

@rosinghal

This comment has been minimized.

rosinghal commented May 12, 2015

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

This comment has been minimized.

Contributor

ThomasBurleson commented May 12, 2015

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

@ask007learning

This comment has been minimized.

ask007learning commented May 12, 2015

+1

1 similar comment
@ismarslomic

This comment has been minimized.

ismarslomic commented May 12, 2015

+1

@rosinghal

This comment has been minimized.

@bastienJS

This comment has been minimized.

bastienJS commented May 23, 2015

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

This comment has been minimized.

tazmon95 commented May 25, 2015

Thanks for the workaround!!!

@JNissi

This comment has been minimized.

JNissi commented May 25, 2015

@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

@robertmesserle robertmesserle removed this from the 0.10.0 milestone May 28, 2015

@osuritz

This comment has been minimized.

osuritz commented Oct 15, 2015

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 6c53d11 mentioned above.

@Trebh Trebh referenced this issue Nov 16, 2015

Merged

Fix profile page #137

@xsegrity

This comment has been minimized.

xsegrity commented Nov 18, 2015

@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

This comment has been minimized.

Contributor

ThomasBurleson commented Nov 18, 2015

@robertmesserle: see @osuritz comment above ^^.

@ThomasBurleson ThomasBurleson modified the milestones: 1.0-rc5, Backlog Nov 18, 2015

@MileanCo

This comment has been minimized.

MileanCo commented Nov 18, 2015

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

This comment has been minimized.

invincibledudess commented Apr 7, 2016

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

This comment has been minimized.

timc13 commented Apr 19, 2016

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment