Skip to content

fix(carousel): improve slide fallback logic and trigger change detection when collection is changing - #17448

Merged
rkaraivanov merged 7 commits into
masterfrom
mdragnev/fix-17439
Jul 27, 2026
Merged

fix(carousel): improve slide fallback logic and trigger change detection when collection is changing#17448
rkaraivanov merged 7 commits into
masterfrom
mdragnev/fix-17439

Conversation

@mddragnev

@mddragnev mddragnev commented Jul 21, 2026

Copy link
Copy Markdown
Member

Closes #17439

Description

Motivation / Context

Type of Change (check all that apply):

  • Bug fix
  • New functionality
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Refactoring (no functional changes)
  • Documentation
  • Demos
  • CI/CD
  • Tests
  • Changelog
  • Skills/Agents

Component(s) / Area(s) Affected:

How Has This Been Tested?

  • Unit tests
  • Manual testing
  • Automated e2e tests

Test Configuration:

  • Angular version:
  • Browser(s):
  • OS:

Screenshots / Recordings

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
  • Accessibility (ARIA, keyboard navigation, focus management) has been verified

@mddragnev
mddragnev marked this pull request as ready for review July 21, 2026 13:46
Copilot AI review requested due to automatic review settings July 21, 2026 13:46
@mddragnev mddragnev added the ❌ status: awaiting-test PRs awaiting manual verification label Jul 21, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Addresses the zoneless change-detection scenario for IgxCarouselComponent when slides are changed at runtime (issue #17439), ensuring slide selection and rendering update without requiring user interaction (e.g., hover) to trigger refresh.

Changes:

  • Updates carousel slide-differ logic to avoid overwriting currentItem when a better active slide has already been determined during a collection refresh.
  • Marks the carousel view for check after slide-selection updates scheduled via requestAnimationFrame, improving zoneless refresh behavior.
  • Adds a new zoneless-focused test suite covering dynamic slide replacement behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File Description
projects/igniteui-angular/carousel/src/carousel/carousel.component.ts Adjusts slide removal fallback logic and explicitly markForCheck() after selection updates to support zoneless refresh.
projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts Adds zoneless tests for dynamic slide replacement and related activation behavior.

Comment thread projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts Outdated
@mddragnev mddragnev changed the title test(carousel): add zoneless tests for slide activation and dynamic s… fix(carousel): improve slide fallback logic and trigger change detection when collection is changing Jul 21, 2026
rkaraivanov
rkaraivanov previously approved these changes Jul 22, 2026
@viktorkombov viktorkombov added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Jul 23, 2026
Copilot AI review requested due to automatic review settings July 23, 2026 09:08

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Comment thread projects/igniteui-angular/carousel/src/carousel/carousel.component.ts Outdated
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings July 23, 2026 10:32

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Copilot AI review requested due to automatic review settings July 27, 2026 08:09

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Comment on lines +1074 to +1085
const fix = TestBed.createComponent(CarouselDynamicSlidesWithNoActiveComponent);
await wait(16);
fix.detectChanges();
await fix.whenStable();
const car: IgxCarouselComponent = fix.componentInstance.carousel;
HelperTestFunctions.verifyActiveSlide(car, 0);

// Replace the entire slide collection;
fix.componentInstance.changeSlides();
await wait(16);
fix.detectChanges();
await fix.whenStable();
Copilot AI review requested due to automatic review settings July 27, 2026 12:46

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts:1077

  • The test uses a fixed wait(16) delay (and does it before the initial detectChanges()), which is both unnecessary and potentially flaky on slower CI. Since the production code schedules slide selection updates via requestAnimationFrame, the test should await an actual animation frame after running change detection instead of sleeping for a hard-coded time.
        const fix = TestBed.createComponent(CarouselDynamicSlidesWithNoActiveComponent);
        await wait(16);
        fix.detectChanges();
        await fix.whenStable();

@rkaraivanov
rkaraivanov merged commit 459630c into master Jul 27, 2026
7 checks passed
@rkaraivanov
rkaraivanov deleted the mdragnev/fix-17439 branch July 27, 2026 13:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🎠 carousel version: 22.1.x ✅ status: verified Applies to PRs that have passed manual verification zoneless

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Zoneless] Changing carousel slides runtime does not refresh the carousel

5 participants