@superleapai/flow-ui 2.5.10 → 2.5.11

package/components/record-multiselect.js

@@ -346,20 +346,20 @@
 
     var optionsList = document.createElement("div");
     optionsList.className = "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-multiselect-options";
-    
-    // Add scroll listener for infinite scroll
-    optionsList.addEventListener("scroll", function () {
-      if (isFetchingMore || !hasMoreRecords) return;
-      var scrollHeight = optionsList.scrollHeight;
-      var scrollTop = optionsList.scrollTop;
-      var clientHeight = optionsList.clientHeight;
-      
-      // Trigger load more when scrolled to bottom (with 50px threshold)
-      if (scrollTop + clientHeight >= scrollHeight - 50) {
-        loadMoreRecords();
-      }
-    });
-    
+
+    var loadMoreSentinel = null;
+    var loadMoreObserver =
+      typeof IntersectionObserver !== "undefined"
+        ? new IntersectionObserver(
+            function (entries) {
+              if (!entries.length || !entries[0].isIntersecting) return;
+              if (isFetchingMore || !hasMoreRecords) return;
+              loadMoreRecords();
+            },
+            { root: optionsList, rootMargin: "50px", threshold: 0 },
+          )
+        : null;
+
     content.appendChild(optionsList);
 
     var Popover = getDep("Popover");
@@ -619,11 +619,17 @@
         opt.remove();
       });
       
-      var oldStates = optionsList.querySelectorAll(".record-multiselect-loading, .record-multiselect-empty");
+      if (loadMoreSentinel && loadMoreObserver) {
+        loadMoreObserver.unobserve(loadMoreSentinel);
+        loadMoreSentinel = null;
+      }
+      var oldStates = optionsList.querySelectorAll(
+        ".record-multiselect-loading, .record-multiselect-empty, .record-multiselect-sentinel",
+      );
       oldStates.forEach(function (el) {
         el.remove();
       });
-      
+
       filteredRecords.forEach(function (rec) {
         var recordId = rec.id || rec.value;
         var recordLabel = rec.name || rec.label || rec.value;
@@ -738,6 +744,15 @@
       
       if (isFetchingMore) {
         showLoadingMore();
+      } else if (hasMoreRecords && filteredRecords.length > 0 && loadMoreObserver) {
+        // Sentinel: when visible (short list or user scrolled to bottom), load more automatically
+        var sentinel = document.createElement("div");
+        sentinel.className = "record-multiselect-sentinel";
+        sentinel.setAttribute("aria-hidden", "true");
+        sentinel.style.cssText = "height:1px;visibility:hidden;pointer-events:none;";
+        optionsList.appendChild(sentinel);
+        loadMoreSentinel = sentinel;
+        loadMoreObserver.observe(sentinel);
       }
     }
 

package/components/record-select.js

@@ -345,18 +345,18 @@
     optionsList.className =
       "overflow-y-auto max-h-[45vh] p-2 w-full rounded-4 bg-fill-quarternary-fill-white record-select-options";
 
-    // Add scroll listener for infinite scroll
-    optionsList.addEventListener("scroll", function () {
-      if (isFetchingMore || !hasMoreRecords) return;
-      var scrollHeight = optionsList.scrollHeight;
-      var scrollTop = optionsList.scrollTop;
-      var clientHeight = optionsList.clientHeight;
-
-      // Trigger load more when scrolled to bottom (with 50px threshold)
-      if (scrollTop + clientHeight >= scrollHeight - 50) {
-        loadMoreRecords();
-      }
-    });
+    var loadMoreSentinel = null;
+    var loadMoreObserver =
+      typeof IntersectionObserver !== "undefined"
+        ? new IntersectionObserver(
+            function (entries) {
+              if (!entries.length || !entries[0].isIntersecting) return;
+              if (isFetchingMore || !hasMoreRecords) return;
+              loadMoreRecords();
+            },
+            { root: optionsList, rootMargin: "50px", threshold: 0 },
+          )
+        : null;
 
     content.appendChild(optionsList);
 
@@ -694,9 +694,13 @@
         opt.remove();
       });
 
-      // Remove old loading/empty states
+      // Remove old loading/empty states and sentinel (unobserve first)
+      if (loadMoreSentinel && loadMoreObserver) {
+        loadMoreObserver.unobserve(loadMoreSentinel);
+        loadMoreSentinel = null;
+      }
       var oldStates = optionsList.querySelectorAll(
-        ".record-select-loading, .record-select-empty",
+        ".record-select-loading, .record-select-empty, .record-select-sentinel",
       );
       oldStates.forEach(function (el) {
         el.remove();
@@ -778,6 +782,15 @@
       // Add loading more indicator at the bottom if fetching
       if (isFetchingMore) {
         showLoadingMore();
+      } else if (hasMoreRecords && filteredRecords.length > 0 && loadMoreObserver) {
+        // Sentinel: when visible (short list or user scrolled to bottom), load more automatically
+        var sentinel = document.createElement("div");
+        sentinel.className = "record-select-sentinel";
+        sentinel.setAttribute("aria-hidden", "true");
+        sentinel.style.cssText = "height:1px;visibility:hidden;pointer-events:none;";
+        optionsList.appendChild(sentinel);
+        loadMoreSentinel = sentinel;
+        loadMoreObserver.observe(sentinel);
       }
     }