Tree select search slow in virtual mode (also strange behavior)

[whittssg]

Reproduction link

https://stackblitz.com/edit/fzbmdm--run?file=src/app/app.component.ts

Steps to reproduce

Go to https://ng.ant.design/components/tree-select/en (not sure why the stackblitx share doesnt work but i tried :) ) and search for an item in the list.. Its super slow to refresh while typing. Also if you scroll down (and add [nzHideUnMatched]="true)" its like the items are still present but invisible so you have to scroll a huge blank space before you hit the results you were after.. FIlter by something middway down to see the effect.

What is expected?

Alot faster filter and no visual bugs.

What is actually happening?

Super slow to filter and lots of visual bugs (almost like using angular virtual scroll with inconsistent sized items)

Environment	Info
ng-zorro-antd	10.0.0
Browser	CHrome latest

[altso]

I'm having the same issue with "invisible" items. Here is working reproduction link: https://codesandbox.io/s/compassionate-sun-rfpys?file=/src/app/app.component.ts:347-371

[descl]

up, we have same problem here

[zyzhu]

I got the same problem too. When nzVirtualHeight is set and nzHideUnMatched is true, searching result will not hide unmatched values and shrink the tree. Instead, there are many invisible values in the original tree if you scroll down.

Reproducing link https://stackblitz.com/edit/angular-pmuojr

[TethyLolind]

https://stackoverflow.com/questions/27784727/how-to-make-child-div-scrollable-when-it-exceeds-parent-height It works for me: .wrapper { display: flex; flex-direction: column; overflow: hidden; }

.scrollable-child { overflow-y: auto; }

[TethyLolind]

https://github.com/NG-ZORRO/ng-zorro-antd/issues/5873#issuecomment-768532072 for slow search , in my case , use formcontrol with debouncetime instead of ngmodelchange / ngmodel makes it much better in same data scale

[whittssg]

https://stackoverflow.com/questions/27784727/how-to-make-child-div-scrollable-when-it-exceeds-parent-height It works for me: .wrapper { display: flex; flex-direction: column; overflow: hidden; }

.scrollable-child { overflow-y: auto; } @TethyLolind Thanks, how did you fit that css in with nz-tree-select? I tried the wrapper code in .ant-select-tree-list-holder-inner and in ant-select-tree-list and the child code in ant-select-tree-treenode but it didnt work.

[TethyLolind]

https://stackoverflow.com/questions/27784727/how-to-make-child-div-scrollable-when-it-exceeds-parent-height It works for me: .wrapper { display: flex; flex-direction: column; overflow: hidden; } .scrollable-child { overflow-y: auto; } @TethyLolind Thanks, how did you fit that css in with nz-tree-select? I tried the wrapper code in .ant-select-tree-list-holder-inner and in ant-select-tree-list and the child code in ant-select-tree-treenode but it didnt work.

@whittssg I apply the solution in nz-tree comp. I add a container div fir the nz-tree which has is in flex display and flex:1 , then apply the wrapper css on the container and add child css to nz-tree . For tree-select in your case, I think you could try to provide a fixed height to the container> > https://stackoverflow.com/questions/27784727/how-to-make-child-div-scrollable-when-it-exceeds-parent-height

It works for me: .wrapper { display: flex; flex-direction: column; overflow: hidden; } .scrollable-child { overflow-y: auto; } @TethyLolind Thanks, how did you fit that css in with nz-tree-select? I tried the wrapper code in .ant-select-tree-list-holder-inner and in ant-select-tree-list and the child code in ant-select-tree-treenode but it didnt work.

@whittssg I apply the solution in nz-tree comp. I add a container div fir the nz-tree which has is in flex display and flex:1 , then apply the wrapper css on the container and add child css to nz-tree . For tree-select in your case, I think you could try to provide a fixed height to the container

[whittssg]

Will this be fixed in v12? Seems like the one thing that never gets fixed in the minor releases. Thanks

[dylanvdmerwe]

This is still an issue for us. Any feedback?

[whittssg]

TethyLolind

@TethyLolind Do you have an example using formcontrol and debounce, i cant get it working. Thanks

[obouallou]

@TethyLolind do you have an example with CSS fix please?

[whittssg]

I did a hackish fix for this and posted it in this issue: Issue.

There is probably a much better way to do it but it seems to work just fine.