Ng-zorro-antd: Tabs - no tab should be active if actual route does not match

[ajeiie120120]

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 |

[wendellhu95]

@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]

Any news about the fix?

[vthinkxie]

@wendzhue try nzHideAll

[ajeiie120120]

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

[wendellhu95]

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

[ajeiie120120]

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

The issue can be closed, great work!