search

NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.84k stars 3.9k forks source link

[nz-select]: nz-select-item zoomMotion animation issue #5290

Open Filip-Gugala opened 4 years ago

Filip-Gugala commented 4 years ago

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 commented 4 years ago

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

LEXXEI commented 4 years ago

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 commented 4 years ago

@LEXXEI I can confirm this workaround works in my case

ngochip commented 3 years ago

@LEXXEI Thank you. it works fine.

IonelLupu commented 3 years ago

@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

crossan007 commented 2 years ago

I believe this also occurs when an nz-select is open inside a modal.

Specifically, if a value was in the multi-select box at the time the modal was closed; the next time the modal is opened having the underlying ngModel tied to the select with a blank value

the *ngIf workaround also works in this scenario (though, since I had the nz-select inside a child-component, I had to toggle the entire component's visibility.