diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx b/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx
index 08d54e086b..9003737c7e 100644
--- a/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx
+++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.mdx
@@ -155,6 +155,12 @@ A dropdown menu can include labels.
+### Dropdown with virtualized items
+
+A dropdown with many items, can be virtualized using `isVirtualized`.
+
+
+
### Dropdown inside a form
A classic dropdown presents options a user needs to choose from.
diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx
index 0c904b396c..09f0305d9d 100644
--- a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx
+++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx
@@ -37,3 +37,11 @@ export const fakeFetchUsers = () => {
}, 1000);
});
};
+
+export const generateItems = (itemsCount = 100) => {
+ const items = [];
+ for (let i = 0; i < itemsCount; i++) {
+ items.push({ value: i, label: `Item ${i}` });
+ }
+ return items;
+};
diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
index 1308abb1ad..6b03a35bba 100644
--- a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
+++ b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
@@ -10,7 +10,7 @@ import { Attach, Email } from "../../Icon/Icons";
import { Avatar, Box, Button, DialogContentContainer, Dropdown, Flex, Label, Modal, ModalContent } from "../../index";
import ModalExampleContent from "../../../storybook/patterns/dropdown-in-modals/ModalExampleContent";
import "./Dropdown.stories.scss";
-import { fakeFetchUsers } from "./Dropdown.stories.helpers";
+import { fakeFetchUsers, generateItems } from "./Dropdown.stories.helpers";
const metaSettings = createStoryMetaSettingsDecorator({
component: Dropdown,
@@ -673,6 +673,15 @@ export const DropdownWithLabels = {
name: "Dropdown with labels"
};
+export const VirtualizedDropdown = {
+ render: () => {
+ const options = useMemo(() => generateItems(300), []);
+
+ return ;
+ },
+ name: "Virtualized dropdown"
+};
+
export const DropdownInsideAForm = {
render: () => {
const options = useMemo(
diff --git a/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap b/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
index c89c69d1b8..29c15a7595 100644
--- a/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
+++ b/packages/core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.snapshot.test.js.snap
@@ -880,386 +880,7 @@ exports[`Dropdown renders correctly snapshot driver should use async if set 1`]
`;
-exports[`Dropdown renders correctly snapshot driver should use virtualization if set 1`] = `
-
-
-
-`;
+exports[`Dropdown renders correctly snapshot driver should use virtualization if set 1`] = ``;
exports[`Dropdown renders correctly when disabled 1`] = `