From 48ce1f80b12d56caa9ca03a3ad2b4eea6d722f2b Mon Sep 17 00:00:00 2001
From: 4gray <fourgray@proton.me>
Date: Sun, 4 Oct 2026 13:03:32 +0200
Subject: [PATCH] fix(epg): schedule the guide's post-render scroll without
 zone.js

The programme guide jumps to now once the virtual list first renders rows,
and focuses cells after keyboard scrolls, from afterNextRender hooks
registered in CDK and RxJS callbacks. zone.js followed those callbacks
with a tick; under zoneless change detection a render hook schedules no
render, so the guide opened at midnight (epg-guide.e2e.ts on the zoneless
build). The guide now marks itself when it registers one, which is
harmless with zone.js.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/lib/epg-guide/epg-guide.component.ts  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/libs/ui/epg/src/lib/epg-guide/epg-guide.component.ts b/libs/ui/epg/src/lib/epg-guide/epg-guide.component.ts
index dfed6d379..c6ba666d3 100644
--- a/libs/ui/epg/src/lib/epg-guide/epg-guide.component.ts
+++ b/libs/ui/epg/src/lib/epg-guide/epg-guide.component.ts
@@ -6,6 +6,7 @@ import { DatePipe } from '@angular/common';
 import {
     afterNextRender,
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     computed,
     DestroyRef,
@@ -83,6 +84,7 @@ export class EpgGuideComponent implements OnDestroy {
     private readonly translate = inject(TranslateService);
     private readonly destroyRef = inject(DestroyRef);
     private readonly injector = inject(Injector);
+    private readonly changeDetector = inject(ChangeDetectorRef);
     private readonly hostElement = inject<ElementRef<HTMLElement>>(ElementRef);
 
     readonly close = output<void>();
@@ -185,8 +187,7 @@ export class EpgGuideComponent implements OnDestroy {
         activeRow: () => this.activeRowIndex(),
         ensureLoaded: (channels) => this.programsService.ensureLoaded(channels),
         setScrollLeft: (left) => this.view.scrollLeft.set(left),
-        afterRender: (callback) =>
-            afterNextRender(callback, { injector: this.injector }),
+        afterRender: (callback) => this.afterNextGuideRender(callback),
     });
 
     private readonly dialogs = new EpgGuideDialogController(
@@ -237,15 +238,23 @@ export class EpgGuideComponent implements OnDestroy {
                 this.viewportController.whenRowsRendered(
                     viewport,
                     this.destroyRef,
-                    () =>
-                        afterNextRender(() => this.jumpNow(false), {
-                            injector: this.injector,
-                        })
+                    () => this.afterNextGuideRender(() => this.jumpNow(false))
                 );
             });
         });
     }
 
+    /**
+     * Run `callback` after the next render. The callers register from CDK
+     * and RxJS callbacks, outside any template event: zone.js used to follow
+     * those with a tick, but without it registering a render hook schedules
+     * no render, so the guide also marks itself for one.
+     */
+    private afterNextGuideRender(callback: () => void): void {
+        afterNextRender(callback, { injector: this.injector });
+        this.changeDetector.markForCheck();
+    }
+
     ngOnDestroy(): void {
         this.view.destroy();
         this.search.destroy();