Grid (selected) event not running in Angular Zone produces change detection issue

[pmoleri]

Description

Grid's "(selected)" event is not running in Angular Zone breaking change detection.

• igniteui-angular version: 14.0.0
• browser: all

Steps to reproduce

1. Add a grid
2. Set (selected) event handler
3. In the selected event handler perform setTimeout() or network request
4. In the callback, set some property that should produce a change

  <p [style.visibility]="selected ? 'visible' : 'hidden'">
    This should disappear after 2 secs (don't move the mouse)
  </p>
  <igx-grid
    igxPreventDocumentScroll
    [data]="data"
    [autoGenerate]="true"
    [height]="'600px'"
    [width]="'100%'"
    [cellSelection]="'single'"
    (selected)="this.handleSelected($event)"
  >
  </igx-grid>

  @HostBinding('class.selected')
  public selected = false;

  public handleSelected(args) {
    this.selected = true;
    setTimeout(() => {
      this.selected = false;
    }, 2000);
  }

Result

The change is ignored until some other action is performed, e.g. move the mouse over the grid

Expected result

The change should be detected automatically

Attachments

Stackblitz repro sample: https://stackblitz.com/edit/angular-q3vzrx?file=src/app/grid/grid-cellSelection-sample/grid-cellSelection.component.ts

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.