From c768392bdea8e440ae5708b57de6fb6c989a5b03 Mon Sep 17 00:00:00 2001
From: JL102 <jordanlees@mailbox.org>
Date: Thu, 2 Nov 2023 23:55:25 -0400
Subject: [PATCH] feat: add maxOptionsToDisplay option to improve autocomplete
 performance on long lists

---
 packages/autocomplete/src/Autocomplete.svelte          |  5 ++++-
 .../site/src/routes/demo/autocomplete/+page.svelte     | 10 ++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/autocomplete/src/Autocomplete.svelte b/packages/autocomplete/src/Autocomplete.svelte
index 6a6ed7345..14a045da4 100644
--- a/packages/autocomplete/src/Autocomplete.svelte
+++ b/packages/autocomplete/src/Autocomplete.svelte
@@ -63,7 +63,7 @@
           </slot>
         </Item>
       {:else}
-        {#each matches as match, i}
+        {#each matchesToDisplay as match, i}
           <Item
             disabled={getOptionDisabled(match)}
             selected={match === value}
@@ -193,6 +193,7 @@
     });
     return result;
   };
+  export let maxOptionsToDisplay = 0;
   export let menu$class = '';
   export let menu$anchor = false;
   export let menu$anchorCorner: ComponentProps<Menu>['anchorCorner'] =
@@ -205,6 +206,8 @@
   let focused = false;
   let listAccessor: SMUIListAccessor;
   let matches: any[] = [];
+  $: matchesToDisplay =
+    maxOptionsToDisplay > 0 ? matches.slice(0, maxOptionsToDisplay) : matches;
   let focusedIndex = -1;
   let focusedItem: SMUIListItemAccessor | undefined = undefined;
 
diff --git a/packages/site/src/routes/demo/autocomplete/+page.svelte b/packages/site/src/routes/demo/autocomplete/+page.svelte
index 0dcab2da7..cf79d1456 100644
--- a/packages/site/src/routes/demo/autocomplete/+page.svelte
+++ b/packages/site/src/routes/demo/autocomplete/+page.svelte
@@ -9,6 +9,16 @@
 
   <pre class="demo-spaced">npm i -D @smui-extra/autocomplete</pre>
 
+  <h5>Performance</h5>
+
+  <p>
+    When dealing with long lists (&gt;50 elements), the creation of the DOM
+    elements inside the list starts to become a bottleneck. In this case, you
+    may want to use the <code>maxOptionsToDisplay</code> option. This option limits
+    the number of list items that can be rendered at a time. When set to 0 (default),
+    every item will be rendered.
+  </p>
+
   <h5>Demos</h5>
 
   <Demo component={Simple} file="autocomplete/_Simple.svelte" />