Skip to content
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

Tabs - no tab should be active if actual route does not match #3873

Closed
ajeiie120120 opened this issue Jul 27, 2019 · 6 comments · Fixed by #4034 or #4094

Comments

@ajeiie120120
Copy link

commented Jul 27, 2019

Reproduction link

https://stackblitz.com/edit/angular-2twhgl

Steps to reproduce

Just append "/5" in the url, the page will be correctly reloaded but the tab "1" will be active even if the "/5" does not match any of the actual tabs links.

What is expected?

Expected no tab active if the actual route does not match any of the tabs defined links through [routerLink] directive

What is actually happening?

The first tab is active by default even if its routerLink is not matching with the actual route

Environment Info
ng-zorro-antd 8.1.0
Browser all
@wendzhue

This comment has been minimized.

Copy link
Member

commented Aug 5, 2019

@ajeiie120120 Tabs component does not support [nzSelectedIndex]="-1". Check this demo: https://stackblitz.com/edit/angular-nrowfx?file=src/app/app.component.ts. It would always select the first for invalid tab indexes.

cc @vthinkxie We need to define the behaviour before making actual fixes.

@ajeiie120120

This comment has been minimized.

Copy link
Author

commented Aug 20, 2019

Any news about the fix?

@vthinkxie

This comment has been minimized.

Copy link
Member

commented Aug 20, 2019

@wendzhue try nzHideAll

@ajeiie120120

This comment has been minimized.

Copy link
Author

commented Aug 31, 2019

[PARTIALLY SOLVED]
@vthinkxie @wendzhue

Hi,
now the tabset does not highlight any tab if the relative link is not active.

But it seems that the first tab is not "smart" as the others and cant detect if current route has changed, so it does not react correctly.

You can try this example https://stackblitz.com/edit/angular-mtudaw:

  1. At application start no tab is active (great!)
  2. Select the "1" tab on the left tabset
  3. Select the "6" tab on the right
  4. The "1" tab is still highlighted even if the route has actually changed

Same with the "5" tab:

  1. Select the "5" tab on the right tabset
  2. Select the "2" tab on the left
  3. The "5" tab is still highlighted even if the route has actually changed

But with other tabs this will not happen:

  1. Select the "2" tab on the left tabset
  2. Select the "5" tab on the right
  3. Tab "2" will be deactivated correctly

or

  1. Select the "6" tab on the right tabset
  2. Select the "3" tab on the left
  3. Tab "6" will be deactivated correctly

Thanks a lot quick support,
you're doing a great job.

@wendzhue wendzhue reopened this Sep 1, 2019

wendzhue added a commit that referenced this issue Sep 2, 2019
@wendzhue

This comment has been minimized.

Copy link
Member

commented Sep 2, 2019

@ajeiie120120 Hi. Thank you for these issues. We have fixed the problem. Please verify it in the next version.

@ajeiie120120

This comment has been minimized.

Copy link
Author

commented Sep 9, 2019

@wendzhue thanks for the update, it works fine now.

The issue can be closed, great work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.