@mozaic-ds/angular 2.1.2 → 2.1.3

package/fesm2022/mozaic-ds-angular.mjs

@@ -4950,7 +4950,11 @@ const VIEWPORT_HEIGHT_PX = 300;
 class MozComboboxComponent {
     _doc = inject(DOCUMENT);
     _overlay = inject(Overlay);
-    _cdr = inject(ChangeDetectorRef);
+    _appRef = inject(ApplicationRef);
+    /** rAF handle for the scroll-driven change-detection loop (see _kickViewportTick). */
+    _viewportTickRaf = null;
+    /** Timestamp of the last viewport scroll event, used to stop the tick loop when idle. */
+    _lastViewportScrollTs = 0;
     /**
      * No-op scroll strategy: the dropdown embeds a CDK virtual-scroll viewport,
      * which is a global `CdkScrollable`. With the default `reposition` strategy,
@@ -5251,17 +5255,39 @@ class MozComboboxComponent {
                 }
             }
         });
-        // Zoneless support: the CDK virtual-scroll viewport recomputes its rendered
-        // range on scroll events fired OUTSIDE the Angular zone. Without Zone.js,
-        // that never schedules change detection, so the rendered window stays frozen
-        // (the list appears to "bounce" and never reaches the bottom). Forcing a CD
-        // pass on each scroll keeps the virtual viewport in sync.
+        // Zoneless support for the virtual-scroll viewport.
+        //
+        // The viewport lives inside the CDK connected-overlay portal, so it CANNOT
+        // be reached through `viewChild()` (the portal renders in a separate view
+        // container). On Angular/CDK 22 the viewport applies its content transform
+        // from an `effect()` that only runs during an ApplicationRef tick; in
+        // zoneless mode no tick is scheduled while the user scrolls the list, so the
+        // rendered window freezes and the panel appears to "bounce" without ever
+        // reaching the bottom. (CDK 21 used a different path and was unaffected,
+        // which is why Storybook on 21 looked fine while the 22 consumer bounced.)
+        //
+        // Fix: while the dropdown is open, listen for scroll events on the viewport
+        // in the capture phase (scroll does not bubble) and drive change detection
+        // for a few frames after each scroll, restoring the per-frame CD that
+        // Zone.js would otherwise provide.
         effect((onCleanup) => {
-            const viewport = this.viewportEl();
-            if (!viewport)
+            if (!this.isOpen())
                 return;
-            const sub = viewport.elementScrolled().subscribe(() => this._cdr.markForCheck());
-            onCleanup(() => sub.unsubscribe());
+            const viewportId = `${this.comboboxId}-viewport`;
+            const onScroll = (event) => {
+                const target = event.target;
+                if (target?.id === viewportId) {
+                    this._kickViewportTick();
+                }
+            };
+            this._doc.addEventListener('scroll', onScroll, true);
+            onCleanup(() => {
+                this._doc.removeEventListener('scroll', onScroll, true);
+                if (this._viewportTickRaf !== null) {
+                    cancelAnimationFrame(this._viewportTickRaf);
+                    this._viewportTickRaf = null;
+                }
+            });
         });
         // Inject global overlay styles — CDK teleports content outside the
         // component host so scoped CSS never reaches .cdk-overlay-pane.
@@ -5572,6 +5598,35 @@ class MozComboboxComponent {
             });
         }
     }
+    /**
+     * Drive change detection for a short window after a viewport scroll so the
+     * CDK virtual-scroll viewport (inside the overlay portal) applies its content
+     * transform in zoneless mode. Runs at most one rAF loop at a time; each new
+     * scroll event extends the window, and the loop stops ~200ms after the last
+     * scroll. `tick()` is guarded because it throws if called during an ongoing
+     * change-detection pass (it never is here — rAF callbacks run outside CD).
+     */
+    _kickViewportTick() {
+        this._lastViewportScrollTs = Date.now();
+        if (this._viewportTickRaf !== null) {
+            return;
+        }
+        const loop = () => {
+            try {
+                this._appRef.tick();
+            }
+            catch {
+                // tick() called during an active CD pass — safe to skip this frame.
+            }
+            if (Date.now() - this._lastViewportScrollTs < 200) {
+                this._viewportTickRaf = requestAnimationFrame(loop);
+            }
+            else {
+                this._viewportTickRaf = null;
+            }
+        };
+        this._viewportTickRaf = requestAnimationFrame(loop);
+    }
     /** Coerce the current value into an array (safe for .some/.filter/.every). */
     _currentValueAsArray() {
         const raw = this.value();