From 21122f1f2979e334522eaa8199436c04da3dd2a0 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Fri, 22 Dec 2023 14:15:52 -0800
Subject: [PATCH] Icu-12125 cap the number of items rendered in dropdown
 component (#2060)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: ⚡️ cap the number of items rendered in dropdown component

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12125
---
 .../core/addon/components/dropdown/index.js   |  3 ++-
 .../components/dropdown/index-test.js         | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/addons/core/addon/components/dropdown/index.js b/addons/core/addon/components/dropdown/index.js
index e6a9643a6..bbfcf1469 100644
--- a/addons/core/addon/components/dropdown/index.js
+++ b/addons/core/addon/components/dropdown/index.js
@@ -16,6 +16,7 @@ export default class DropdownComponent extends Component {
 
   /**
    * Takes itemOptions and filters them by searchTerm if there is one
+   * and limits the number of items displayed in the dropdown to 500.
    * @returns {[object]}
    */
   get itemOptions() {
@@ -28,7 +29,7 @@ export default class DropdownComponent extends Component {
         return isNameMatch || isIdMatch;
       });
     }
-    return items;
+    return items.slice(0, 500);
   }
 
   // =methods
diff --git a/addons/core/tests/integration/components/dropdown/index-test.js b/addons/core/tests/integration/components/dropdown/index-test.js
index 1231a5c7b..77b8362af 100644
--- a/addons/core/tests/integration/components/dropdown/index-test.js
+++ b/addons/core/tests/integration/components/dropdown/index-test.js
@@ -114,4 +114,31 @@ module('Integration | Component | dropdown/index', function (hooks) {
 
     assert.true(result);
   });
+
+  test('it only renders a max of 500 items but allows searching on all items', async function (assert) {
+    this.set('checkedItems', []);
+    this.set(
+      'itemOptions',
+      [...Array(600).keys()].map((k) => ({ id: k.toString() })),
+    );
+
+    await render(hbs`<Dropdown
+  @name={{this.name}}
+  @itemOptions={{this.itemOptions}}
+  @checkedItems={{this.checkedItems}}
+  @applyFilter={{this.applyFilter}}
+  @isSearchable={{true}}
+/>`);
+
+    await click(TOGGLE_DROPDOWN_SELECTOR);
+
+    assert.dom(ITEM_SELECTOR).exists({ count: 500 });
+
+    // Random number between 500 and 599 to search
+    await fillIn(SEARCH_INPUT_SELECTOR, '591');
+
+    const result = await waitUntil(() => findAll(ITEM_SELECTOR).length === 1);
+
+    assert.true(result);
+  });
 });