Ng-zorro-antd: [nz-select]: nz-select-item zoomMotion animation issue

[Filip-Gugala]

Reproduction link

https://stackblitz.com/edit/angular-ksllvu

Steps to reproduce

1. Open dropdown
2. Select any user from search
3. Close search and dropdown
4. Open dropdown again

What is expected?

Selected items are rendered correctly, no error is thrown after clearing the field.

What is actually happening?

After opening the dropdown again you can see that the selected items are not showing, also clicking the clear search button throws:

ERROR TypeError: Cannot read property 'zoomMotion' of undefined

| Environment | Info |
|---|---|
| ng-zorro-antd | 9.1.2 |
| Browser | Google Chrome Version 81.0.4044.138 |

[vthinkxie]

duplicated #1455
you can disable animation with nzNoAnimation to skip this bug now.
blocked by https://github.com/angular/angular/issues/24041

[LEXXEI]

I found solution. Need use nz-select with *ngIf="visible" and [(nzVisible)]="visible" for nz-dropdown. Example https://stackblitz.com/edit/angular-ksllvu-8udr3r

[IonelLupu]

@LEXXEI I can confirm this workaround works in my case

[ngochip]

@LEXXEI Thank you. it works fine.

[IonelLupu]

@vthinkxie While this is a good temporary solution to this exact use case, it doesn't cover the case when you are using ng-content inside a component (when you have a custom component).

Take a look at this example. The steps to reproduce this are the same.

The only solution I found for this problem is to create an observable where I push the changes of the visible property, and then use it in my content, just like this