Skip to content

fix(for-of): call recalcUpdateSizes via afterNextRender in zoneless mode - 20.1.x#17327

Open
viktorkombov wants to merge 2 commits into
20.1.xfrom
vkombov/fix-17290-20.1.x
Open

fix(for-of): call recalcUpdateSizes via afterNextRender in zoneless mode - 20.1.x#17327
viktorkombov wants to merge 2 commits into
20.1.xfrom
vkombov/fix-17290-20.1.x

Conversation

@viktorkombov

Copy link
Copy Markdown
Contributor

Closes #17280

Description

In zoneless Angular (provideZonelessChangeDetection), NoopNgZone.onStable never emits, so recalcUpdateSizes() was never called after scrolling. This left the virtual scroll size cache uncorrected, causing the last visible row in MRL grids to appear partially clipped.

Motivation / Context

In for_of.directive.ts, at all three scroll handler sites, detect zoneless mode and use afterNextRender({ read: () => recalcUpdateSizes() }) instead of zone.onStable.pipe(first()).subscribe(recalcUpdateSizes). Zone mode keeps the original path unchanged (replacing it unconditionally breaks an existing zone-based scroll test).
In grid-base.directive.ts, the resizeNotify handler skips zone.run() in zoneless mode - notifyChanges() already calls markForCheck() which schedules CD via the zoneless scheduler.

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:

Grid, For-of

How Has This Been Tested?

Added a zoneless describe block in for_of.directive.spec.ts verifying recalcUpdateSizes is called after scroll when using provideZonelessChangeDetection.

  • 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

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

Fixes virtual scroll size-cache correction in zoneless Angular (provideZonelessChangeDetection) where NgZone.onStable never emits, which previously prevented recalcUpdateSizes() from running after scroll and could leave the last visible row clipped.

Changes:

  • Update IgxForOfDirective / IgxGridForOfDirective scroll handlers to use afterNextRender(...) in zoneless mode to trigger recalcUpdateSizes().
  • Update grid resize notification handling to skip zone.run(...) in zoneless mode.
  • Add a zoneless unit test verifying recalcUpdateSizes() is called after vertical scroll.

Reviewed changes

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

File Description
projects/igniteui-angular/src/lib/grids/grid-base.directive.ts Skip zone.run() work wrapping in zoneless mode; adds zoneless detection helper.
projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts Schedule recalcUpdateSizes() via afterNextRender in zoneless scroll handlers; adds zoneless detection helper.
projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts Adds zoneless test coverage for recalcUpdateSizes() after scroll.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts Outdated
Comment thread projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants