Filter using picker

packages/bbui/src/Form/Core/Multiselect.svelte

@@ -15,6 +15,7 @@
   export let sort = false
   export let autoWidth = false
   export let fetchTerm = null
+  export let searchTerm = null
   export let useFetch = false
   export let customPopoverHeight
   export let customPopoverOffsetBelow
@@ -91,6 +92,7 @@
   isPlaceholder={!arrayValue.length}
   {autocomplete}
   bind:fetchTerm
+  bind:searchTerm
   bind:open
   {useFetch}
   {isOptionSelected}

packages/bbui/src/Form/Core/Picker.svelte

@@ -36,6 +36,7 @@
   export let autocomplete = false
   export let sort = false
   export let fetchTerm = null
+  export let searchTerm = null
   export let useFetch = false
   export let customPopoverHeight
   export let customPopoverOffsetBelow
@@ -45,7 +46,6 @@
   export let customAnchor = null
   const dispatch = createEventDispatcher()
 
-  let searchTerm = null
   let button
   let popover
 

packages/bbui/src/Form/Core/Select.svelte

@@ -25,6 +25,8 @@
   export let tag = null
   export let customPopoverOffsetBelow
   export let customPopoverMaxHeight
+  export let fetchTerm = null
+  export let searchTerm = null
 
   const dispatch = createEventDispatcher()
 
@@ -65,6 +67,8 @@
 <Picker
   on:click
   bind:open
+  bind:fetchTerm
+  bind:searchTerm
   {quiet}
   {id}
   {error}

packages/client/src/components/app/forms/RelationshipField.svelte

@@ -21,7 +21,7 @@
   let fieldApi
   let fieldSchema
   let tableDefinition
-  let fetchTerm
+  let searchTerm
 
   $: multiselect = fieldSchema?.relationshipType !== "one-to-many"
   $: linkedTableId = fieldSchema?.tableId
@@ -61,25 +61,20 @@
     }, {}),
   }
 
-  $: options = fetchTerm
-    ? Object.values(allOptions).filter(row =>
-        row[primaryDisplay].includes(fetchTerm)
-      )
-    : Object.values(allOptions)
+  $: options = Object.values(allOptions)
 
-  let lastFetchedTerm
-  $: fetchRows(fetchTerm)
+  $: fetchRows(searchTerm, primaryDisplay)
 
-  const fetchRows = fetchTerm => {
-    const termChangedSinceFetch = (lastFetchedTerm || "") !== (fetchTerm || "")
-
-    const allRowsFetched = !lastFetchedTerm && !$fetch.hasNextPage
-    if (!allRowsFetched && termChangedSinceFetch) {
+  const fetchRows = (searchTerm, primaryDisplay) => {
+    const allRowsFetched =
+      $fetch.loaded &&
+      !Object.keys($fetch.query.string).length &&
+      !$fetch.hasNextPage
+    if (!allRowsFetched) {
       // Don't request until we have the primary display
       if (primaryDisplay) {
-        lastFetchedTerm = fetchTerm
         fetch.update({
-          query: { string: { [primaryDisplay]: fetchTerm } },
+          query: { string: { [primaryDisplay]: searchTerm } },
         })
       }
     }
@@ -150,8 +145,8 @@
       getOptionValue={option => option._id}
       {placeholder}
       sort
-      useFetch
-      bind:fetchTerm
+      useFetch={false}
+      bind:searchTerm
     />
   {/if}
 </Field>