@cqa-lib/cqa-ui 1.0.88 → 1.0.90

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -1513,6 +1513,24 @@ class DynamicSelectFieldComponent {
         this.searchTextByKey = {};
         this.lastOptionsLength = 0;
         this.loadingMore = false;
+        this.onPanelScroll = () => {
+            if (!this.config?.hasMore || this.loadingMore)
+                return;
+            const el = this.panelScrollEl;
+            if (!el)
+                return;
+            const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 48; // ~3 option rows
+            if (nearBottom) {
+                this.loadingMore = true;
+                const key = this.config?.key || '';
+                const q = this.searchTextByKey[key] || '';
+                this.loadMore.emit({ key, query: q });
+                try {
+                    this.config.onLoadMore?.(q);
+                }
+                catch { }
+            }
+        };
     }
     ngOnInit() {
         if (!this.config || !this.config.key) {
@@ -1719,6 +1737,14 @@ class DynamicSelectFieldComponent {
                 catch { }
                 this.loadMoreObserver = undefined;
             }
+            // Remove scroll listener if attached
+            if (this.panelScrollEl) {
+                try {
+                    this.panelScrollEl.removeEventListener('scroll', this.onPanelScroll);
+                }
+                catch { }
+                this.panelScrollEl = undefined;
+            }
             return;
         }
         // Focus the search box if enabled
@@ -1740,6 +1766,17 @@ class DynamicSelectFieldComponent {
         }
         // Setup infinite scroll observer on sentinel
         setTimeout(() => this.setupLoadMoreObserver(), 0);
+        // Also attach a scroll listener fallback for reliable load-more triggers
+        setTimeout(() => {
+            try {
+                const panels = Array.from(document.querySelectorAll('.mat-select-panel'));
+                this.panelScrollEl = panels.length ? panels[panels.length - 1] : undefined;
+                if (this.panelScrollEl) {
+                    this.panelScrollEl.addEventListener('scroll', this.onPanelScroll, { passive: true });
+                }
+            }
+            catch { }
+        }, 0);
     }
     onSearch(key, value) {
         this.searchTextByKey[key] = value ?? '';
@@ -1904,6 +1941,8 @@ class DynamicSelectFieldComponent {
             catch { }
             this.loadMoreObserver = undefined;
         }
+        // Use the sentinel's closest panel as the root to avoid picking a wrong panel
+        const panelRoot = sentinel.closest('.mat-select-panel');
         this.loadMoreObserver = new IntersectionObserver((entries) => {
             for (const entry of entries) {
                 if (entry.isIntersecting) {
@@ -1921,7 +1960,7 @@ class DynamicSelectFieldComponent {
                     }
                 }
             }
-        }, { root: document.querySelector('.mat-select-panel'), threshold: 0.1 });
+        }, { root: panelRoot, threshold: 0.1 });
         try {
             this.loadMoreObserver.observe(sentinel);
         }