when changing the tabs in modal, the tab content comes from the page which is out of the modal

[kjklhr]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-que38s?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

click tab2

What is expected?

the tab content comes from the modal

What is actually happening?

the tab content comes from the page

Environment	Info
ng-zorro-antd	17.3.0
Browser	chrome 122.0.6261.112

[ParsaArvanehPA]

Hi @kjklhr , I checked your sample, considering the way nz-tab works, such behavour is expected. To avoid such a problem, I suggest you: 1- set a classname to your modal via nzClassName, because later you will use ::ng-deep to set some styles to it, and it is better to have a unique name when working with ng-deep 2- set the overflow value to hidden in your stylesheet

app.component.html

<nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" [nzClassName]="'my-modal-wrapper'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
    <ng-container *nzModalContent>
        <nz-tabset>
            <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
            <nz-tab nzTitle="Tab 2">Content of Tab Pane 2</nz-tab>
            <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab>
        </nz-tabset>
    </ng-container>
</nz-modal>

app.component.scss

::ng-deep {
    .my-modal-wrapper {
        overflow: hidden;
    }
}

[kjklhr]

@ParsaArvanehPA it works totally fine in 17.2.0, so i think it is a bug, thanks anyway

[altso]

I believe it's caused by this change https://github.com/NG-ZORRO/ng-zorro-antd/pull/8372. Agree with @kjklhr, it feels like a bug to me.

[altso]

@ParsaArvanehPA any word on this issue? Your provided workaround works, but this should work out of the box in my opinion.

[altso]

FYI, the slide animation was replaced with fade out/in in the latest version, so the original issue is no longer reproducible.