From b391ca37ab835a94c137f543a7374c72ef03e088 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 22 Sep 2023 13:51:08 +0200
Subject: [PATCH] Infinite scroll

---
 .../bbui/src/Form/Core/Multiselect.svelte     |  1 +
 packages/bbui/src/Form/Core/Picker.svelte     | 20 +++++++++++++++++--
 packages/bbui/src/Form/Core/Select.svelte     |  1 +
 .../app/forms/RelationshipField.svelte        |  7 +++++++
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index bd1b7dfd2c..4d7b7537c9 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -82,6 +82,7 @@
 </script>
 
 <Picker
+  on:loadMore
   {id}
   {error}
   {disabled}
diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index c1d0ac1f27..2fc18b6a64 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -2,7 +2,7 @@
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onDestroy } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
   import Icon from "../../Icon/Icon.svelte"
@@ -43,10 +43,12 @@
   export let align = "left"
   export let footer = null
   export let customAnchor = null
+
   const dispatch = createEventDispatcher()
 
   let button
   let popover
+  let component
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -89,6 +91,20 @@
     }
     return options
   }
+
+  const onScroll = e => {
+    const scrollPxThreshold = 100
+    const scrollPositionFromBottom =
+      e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
+    if (scrollPositionFromBottom < scrollPxThreshold) {
+      dispatch("loadMore")
+    }
+  }
+
+  $: component?.addEventListener("scroll", onScroll)
+  onDestroy(() => {
+    component?.removeEventListener("scroll", null)
+  })
 </script>
 
 <button
@@ -168,7 +184,7 @@
         placeholder="Search"
       />
     {/if}
-    <ul class="spectrum-Menu" role="listbox">
+    <ul class="spectrum-Menu" role="listbox" bind:this={component}>
       {#if placeholderOption}
         <li
           class="spectrum-Menu-item placeholder"
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 5384308418..e34fc869ed 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -67,6 +67,7 @@
   on:click
   bind:open
   bind:searchTerm
+  on:loadMore
   {quiet}
   {id}
   {error}
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index a46b790e4e..7e22d9c45e 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -118,6 +118,12 @@
       onChange({ value })
     }
   }
+
+  const loadMore = () => {
+    if (!$fetch.loading) {
+      fetch.nextPage()
+    }
+  }
 </script>
 
 <Field
@@ -138,6 +144,7 @@
       {autocomplete}
       value={selectedValue}
       on:change={multiselect ? multiHandler : singleHandler}
+      on:loadMore={loadMore}
       id={fieldState.fieldId}
       disabled={fieldState.disabled}
       error={fieldState.error}