Skip to content

fix(select): support igx-select-item inside nested @for/@if control flow blocks - 21.1.x#17202

Open
Zneeky wants to merge 5 commits into21.1.xfrom
aahmedov/fix-select-control-flow-21.1.x
Open

fix(select): support igx-select-item inside nested @for/@if control flow blocks - 21.1.x#17202
Zneeky wants to merge 5 commits into21.1.xfrom
aahmedov/fix-select-control-flow-21.1.x

Conversation

@Zneeky
Copy link
Copy Markdown
Contributor

@Zneeky Zneeky commented Apr 17, 2026

Closes #17164

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them

Copilot AI review requested due to automatic review settings April 17, 2026 09:22
@Zneeky Zneeky added ❌ status: awaiting-test PRs awaiting manual verification select Select component version: 21.1.x labels Apr 17, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes an igx-select rendering issue where <igx-select-item> elements nested inside Angular control flow blocks (@for + @if/@else) are discovered via @ContentChildren but do not end up projected into the dropdown scroll container, resulting in an empty list.

Changes:

  • Add DOM-reparenting logic in IgxSelectComponent to move unprojected select items (and their groups) into the scroll container while preserving template order.
  • Add unit tests covering nested control flow scenarios for standalone items, grouped items, and groups inside control flow.
  • Update the samples app to expose/select the Select sample and add a reproduction section.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
src/app/select/select.sample.ts Adds sample data used to reproduce the nested control-flow scenario in the demo app.
src/app/select/select.sample.html Adds a new sample section demonstrating @for + @if/@else with <igx-select-item>.
src/app/app.routes.ts Registers a /select route to access the Select sample in the demo app.
src/app/app.component.ts Adds a navigation entry for the new Select route in the demo app.
projects/igniteui-angular/select/src/select/select.component.ts Implements moveItemsToScrollContainer() and invokes it on init and on children.changes to fix projection/rendering.
projects/igniteui-angular/select/src/select/select.component.spec.ts Adds regression tests for nested control flow and group scenarios.

Comment thread src/app/select/select.sample.html
Comment thread src/app/select/select.sample.html Outdated
Comment thread projects/igniteui-angular/select/src/select/select.component.ts Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

select Select component version: 21.1.x ❌ status: awaiting-test PRs awaiting manual verification

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants