fix(core): not all callbacks running when registered at the same time (#56981)

crisbeto · atscott · commit 5682527d949b · 2024-07-16T08:42:26.000-07:00
Fixes that only the first callback was firing when multiple are registered in the same call to `afterNextRender`, e.g. `afterNextRender({earlyRead: fn, read: fn});` Fixes #56979. PR Close #56981
diff --git a/packages/core/src/render3/after_render_hooks.ts b/packages/core/src/render3/after_render_hooks.ts
@@ -598,6 +598,7 @@ function afterRenderImpl(
     unregisterFn();
   };
   const unregisterFn = injector.get(DestroyRef).onDestroy(destroy);
+  let callbacksLeftToRun = 0;
 
   const registerCallback = (
     phase: AfterRenderPhase,
@@ -608,7 +609,10 @@ function afterRenderImpl(
     }
     const callback = once
       ? (...args: [unknown]) => {
-          destroy();
+          callbacksLeftToRun--;
+          if (callbacksLeftToRun < 1) {
+            destroy();
+          }
           phaseCallback(...args);
         }
       : phaseCallback;
@@ -619,6 +623,7 @@ function afterRenderImpl(
     );
     callbackHandler.register(instance);
     instances.push(instance);
+    callbacksLeftToRun++;
   };
 
   registerCallback(AfterRenderPhase.EarlyRead, spec.earlyRead);
diff --git a/packages/core/test/acceptance/after_render_hook_spec.ts b/packages/core/test/acceptance/after_render_hook_spec.ts
@@ -1233,6 +1233,87 @@ describe('after render hooks', () => {
           'read-2',
         ]);
       });
+
+      it('should invoke all the callbacks once when they are registered at the same time', () => {
+        const log: string[] = [];
+
+        @Component({template: ''})
+        class Comp {
+          constructor() {
+            afterNextRender({
+              earlyRead: () => {
+                log.push('early-read');
+              },
+              write: () => {
+                log.push('write');
+              },
+              mixedReadWrite: () => {
+                log.push('mixed-read-write');
+              },
+              read: () => {
+                log.push('read');
+              },
+            });
+          }
+        }
+
+        TestBed.configureTestingModule({
+          declarations: [Comp],
+          ...COMMON_CONFIGURATION,
+        });
+        createAndAttachComponent(Comp);
+
+        expect(log).toEqual([]);
+        TestBed.inject(ApplicationRef).tick();
+        expect(log).toEqual(['early-read', 'write', 'mixed-read-write', 'read']);
+        TestBed.inject(ApplicationRef).tick();
+        expect(log).toEqual(['early-read', 'write', 'mixed-read-write', 'read']);
+      });
+
+      it('should invoke all the callbacks each time when they are registered at the same time', () => {
+        const log: string[] = [];
+
+        @Component({template: ''})
+        class Comp {
+          constructor() {
+            afterRender({
+              earlyRead: () => {
+                log.push('early-read');
+              },
+              write: () => {
+                log.push('write');
+              },
+              mixedReadWrite: () => {
+                log.push('mixed-read-write');
+              },
+              read: () => {
+                log.push('read');
+              },
+            });
+          }
+        }
+
+        TestBed.configureTestingModule({
+          declarations: [Comp],
+          ...COMMON_CONFIGURATION,
+        });
+        createAndAttachComponent(Comp);
+
+        expect(log).toEqual([]);
+        TestBed.inject(ApplicationRef).tick();
+        expect(log).toEqual(['early-read', 'write', 'mixed-read-write', 'read']);
+        TestBed.inject(ApplicationRef).tick();
+        expect(log).toEqual([
+          'early-read',
+          'write',
+          'mixed-read-write',
+          'read',
+          'early-read',
+          'write',
+          'mixed-read-write',
+          'read',
+        ]);
+      });
     });
 
     it('allows writing to a signal in afterRender', () => {
