WIP: attempt to use MutationObserver to observe table rows

Author: mmalerba

src/cdk-experimental/popover-edit/table-directives.ts

@@ -9,18 +9,18 @@ import {FocusTrap} from '@angular/cdk/a11y';
 import {OverlayRef, OverlaySizeConfig, PositionStrategy} from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {
-  afterRender,
+  afterNextRender,
   AfterViewInit,
   Directive,
   ElementRef,
   EmbeddedViewRef,
+  inject,
+  ListenerOptions,
   NgZone,
   OnDestroy,
+  Renderer2,
   TemplateRef,
   ViewContainerRef,
-  inject,
-  Renderer2,
-  ListenerOptions,
 } from '@angular/core';
 import {merge, Observable, Subject} from 'rxjs';
 import {
@@ -35,8 +35,10 @@ import {
   withLatestFrom,
 } from 'rxjs/operators';
 
+import {_bindEventWithOptions} from '@angular/cdk/platform';
 import {CELL_SELECTOR, EDIT_PANE_CLASS, EDIT_PANE_SELECTOR, ROW_SELECTOR} from './constants';
 import {EditEventDispatcher, HoverContentState} from './edit-event-dispatcher';
+import {EditRef} from './edit-ref';
 import {EditServices} from './edit-services';
 import {FocusDispatcher} from './focus-dispatcher';
 import {
@@ -45,8 +47,6 @@ import {
   FocusEscapeNotifierFactory,
 } from './focus-escape-notifier';
 import {closest} from './polyfill';
-import {EditRef} from './edit-ref';
-import {_bindEventWithOptions} from '@angular/cdk/platform';
 
 /**
  * Describes the number of columns before and after the originating cell that the
@@ -80,11 +80,24 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
 
   protected readonly destroyed = new Subject<void>();
 
-  private _rendered = new Subject();
+  private _rowsRendered = new Subject();
+
+  private _rowMutationObserver = globalThis.MutationObserver
+    ? new globalThis.MutationObserver(mutations => {
+        if (mutations.some(m => this._isRowMutation(m))) {
+          this._rowsRendered.next();
+        }
+      })
+    : null;
 
   constructor() {
-    afterRender(() => {
-      this._rendered.next();
+    // Keep track of when the rendered rows changes.
+    afterNextRender(() => {
+      this._rowsRendered.next();
+      this._rowMutationObserver?.observe(this.elementRef.nativeElement, {
+        childList: true,
+        subtree: true,
+      });
     });
   }
 
@@ -95,7 +108,29 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
   ngOnDestroy(): void {
     this.destroyed.next();
     this.destroyed.complete();
-    this._rendered.complete();
+    this._rowMutationObserver?.disconnect();
+  }
+
+  private _isRowMutation(mutation: MutationRecord): boolean {
+    for (let i = 0; i < mutation.addedNodes.length; i++) {
+      const el = mutation.addedNodes[i];
+      if (!(el instanceof HTMLElement)) {
+        continue;
+      }
+      if (el.matches(ROW_SELECTOR)) {
+        return true;
+      }
+    }
+    for (let i = 0; i < mutation.removedNodes.length; i++) {
+      const el = mutation.removedNodes[i];
+      if (!(el instanceof HTMLElement)) {
+        continue;
+      }
+      if (el.matches(ROW_SELECTOR)) {
+        return true;
+      }
+    }
+    return false;
   }
 
   private _observableFromEvent<T extends Event>(
@@ -153,7 +188,7 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
       // Keep track of rows within the table. This is used to know which rows with hover content
       // are first or last in the table. They are kept focusable in case focus enters from above
       // or below the table.
-      this._rendered
+      this._rowsRendered
         .pipe(
           // Avoid some timing inconsistencies since Angular v19.
           debounceTime(0),