Ng-zorro-antd: Select with groups not working correctly with ngfor in group and ngfor in option

[whittssg]

Reproduction link

https://stackblitz.com/edit/angular-jpdyhh?file=src/app/app.component.ts

Steps to reproduce

Go to link, click the Select dropdown. Notice that one of Group 1s children is in group 2.

What is expected?

Group one's children should be under group 1

What is actually happening?

One of group ones children is under group 2.

| Environment | Info |
|---|---|
| ng-zorro-antd | 9.0.0-beta.3 |
| Browser | Latest Chrome |

---

If i do the same with divs (not using nz-select) the output looks good. Thanks.

[hoppler]

• The issue is here: it should use listOfContainerItem for findIndex instead of this.listOfContainerItem

https://github.com/NG-ZORRO/ng-zorro-antd/blob/f362d4a51f01f3f816acd6e9e92d6dc2d2e0d519/components/select/select.component.ts#L296-L297

should be

const index = listOfContainerItem.findIndex(item => groupItem.groupLabel === item.groupLabel); 
listOfContainerItem.splice(index, 0, groupItem);

[whittssg]

@hoppler Does your hover highlighting and selection work once you made the change? I tested it and the groups look good now on my end but the Highlight on the first group highlights all items and selecting either of the children selects them both

[hoppler]

after the change, searching and selecting works for me as expected. the
selected value gets highlighted and nothing else. maybe you create a
little screenshot of what you see

[whittssg]

@hoppler Maybe it was the way i edited the select component.. To test i just edited the file in "node_modules\ng-zorro-antd__ivy_ngcc__\fesm2015\ng-zorro-antd-select.js" it was line 1295. Guess it worked for the actual grouping but not for the selecting. Maybe once its fixed the way you said to it will work correctly for me. Thanks