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``); + + 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); + }); });