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
Closed

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

ajeiie120120 opened this issue Jul 27, 2019 · 6 comments · Fixed by #4034 or #4094
Assignees
Labels
Component: Tabs Good First Issue Issues recommended for first-time contributor help wanted 💬 Discussion Need more insights to this issue

Comments

@ajeiie120120
Copy link

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
@wzhudev
Copy link
Member

wzhudev 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.

@wzhudev wzhudev added the 💬 Discussion Need more insights to this issue label Aug 5, 2019
@ajeiie120120
Copy link
Author

Any news about the fix?

@vthinkxie
Copy link
Member

@wendzhue try nzHideAll

@ajeiie120120
Copy link
Author

ajeiie120120 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.

@wzhudev
Copy link
Member

wzhudev commented Sep 2, 2019

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

@ajeiie120120
Copy link
Author

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

The issue can be closed, great work!

Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this issue Apr 9, 2020
hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this issue Aug 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Tabs Good First Issue Issues recommended for first-time contributor help wanted 💬 Discussion Need more insights to this issue
Projects
None yet
3 participants