WIP: attempt to use MutationObserver to observe table rows

Author: mmalerba

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

@@ -9,34 +9,26 @@ import {FocusTrap} from '@angular/cdk/a11y';
 import {OverlayRef, OverlaySizeConfig, PositionStrategy} from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {
-  afterRender,
   AfterViewInit,
   Directive,
   ElementRef,
   EmbeddedViewRef,
+  inject,
+  ListenerOptions,
   NgZone,
   OnDestroy,
+  Renderer2,
   TemplateRef,
   ViewContainerRef,
-  inject,
-  Renderer2,
-  ListenerOptions,
 } from '@angular/core';
 import {merge, Observable, Subject} from 'rxjs';
-import {
-  debounceTime,
-  filter,
-  map,
-  mapTo,
-  share,
-  startWith,
-  takeUntil,
-  throttleTime,
-  withLatestFrom,
-} from 'rxjs/operators';
+import {filter, map, mapTo, share, startWith, takeUntil, throttleTime} from 'rxjs/operators';
 
+import {_bindEventWithOptions} from '@angular/cdk/platform';
+import {toSignal} from '@angular/core/rxjs-interop';
 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 +37,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 +70,29 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
 
   protected readonly destroyed = new Subject<void>();
 
-  private _rendered = new Subject();
+  private _editingOrFocusedSignal = toSignal(this.editEventDispatcher.editingOrFocused);
+
+  private _rowMutationObserver = globalThis.MutationObserver
+    ? new globalThis.MutationObserver(mutations => {
+        if (mutations.some(m => this._isRowMutation(m))) {
+          // Optimization: ignore dom changes while focus is within the table as we already
+          // ensure that rows above and below the focused/active row are tabbable.
+          if (this._editingOrFocusedSignal() == null) {
+            this.editEventDispatcher.allRows.next(
+              this.elementRef.nativeElement.querySelectorAll(ROW_SELECTOR),
+            );
+          }
+        }
+      })
+    : null;
 
   constructor() {
-    afterRender(() => {
-      this._rendered.next();
+    // 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._rowMutationObserver?.observe(this.elementRef.nativeElement, {
+      childList: true,
+      subtree: true,
     });
   }
 
@@ -95,7 +103,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>(
@@ -150,23 +180,6 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
         .pipe(mapTo(null), share(), takeUntil(this.destroyed))
         .subscribe(this.editEventDispatcher.focused);
 
-      // 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
-        .pipe(
-          // Avoid some timing inconsistencies since Angular v19.
-          debounceTime(0),
-          // Optimization: ignore dom changes while focus is within the table as we already
-          // ensure that rows above and below the focused/active row are tabbable.
-          withLatestFrom(this.editEventDispatcher.editingOrFocused),
-          filter(([_, activeRow]) => activeRow == null),
-          map(() => element.querySelectorAll(ROW_SELECTOR)),
-          share(),
-          takeUntil(this.destroyed),
-        )
-        .subscribe(this.editEventDispatcher.allRows);
-
       this._observableFromEvent<KeyboardEvent>(element, 'keydown')
         .pipe(
           filter(event => event.key === 'Enter'),