diff --git a/.changeset/tiny-fishes-guess.md b/.changeset/tiny-fishes-guess.md
new file mode 100644
index 00000000000..790e559b327
--- /dev/null
+++ b/.changeset/tiny-fishes-guess.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Improved list based control's performance when lots of items are displayed.
diff --git a/packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx b/packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx
index 70fec507524..e3f2bec7e33 100644
--- a/packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx
+++ b/packages/core/src/__tests__/__e2e__/combo-box/ComboBox.cy.tsx
@@ -21,6 +21,7 @@ const {
MultiplePillsTruncated,
SelectOnTab,
LongList,
+ PerformanceTest,
} = composeStories(comboBoxStories);
describe("Given a ComboBox", () => {
@@ -730,4 +731,24 @@ describe("Given a ComboBox", () => {
cy.findAllByRole("option").eq(0).realClick();
cy.get("@blurSpy").should("not.have.been.called");
});
+
+ it("should support 10000 items without much delay", () => {
+ cy.mount();
+
+ cy.findByRole("combobox").should("be.visible");
+
+ cy.window().its("performance").invoke("mark", "open_start");
+
+ cy.findByRole("combobox").realClick();
+
+ cy.findByRole("listbox", { timeout: 30000 }).should("be.visible");
+
+ cy.window().its("performance").invoke("mark", "open_end");
+
+ cy.window()
+ .its("performance")
+ .invoke("measure", "open_duration", "open_start", "open_end")
+ .its("duration", { timeout: 0 })
+ .should("be.lessThan", 5000);
+ });
});
diff --git a/packages/core/src/list-control/ListControlState.ts b/packages/core/src/list-control/ListControlState.ts
index 66970747027..4d045b58632 100644
--- a/packages/core/src/list-control/ListControlState.ts
+++ b/packages/core/src/list-control/ListControlState.ts
@@ -53,6 +53,35 @@ export type ListControlProps- = {
valueToString?: (item: Item) => string;
};
+function findElementPosition(
+ elements: { element: HTMLElement }[],
+ element: HTMLElement,
+) {
+ if (elements.length === 0) {
+ return 0;
+ }
+
+ if (
+ element.compareDocumentPosition(elements[elements.length - 1].element) &
+ Node.DOCUMENT_POSITION_PRECEDING
+ ) {
+ return -1;
+ }
+
+ if (
+ element.compareDocumentPosition(elements[0].element) &
+ Node.DOCUMENT_POSITION_FOLLOWING
+ ) {
+ return 0;
+ }
+
+ return elements.findIndex(
+ (option) =>
+ option.element.compareDocumentPosition(element) &
+ Node.DOCUMENT_POSITION_PRECEDING,
+ );
+}
+
export function defaultValueToString
- (item: Item): string {
return String(item);
}
@@ -165,12 +194,7 @@ export function useListControl
- (props: ListControlProps
- ) {
(optionValue: OptionValue
- , element: HTMLElement) => {
const { id } = optionValue;
const option = optionsRef.current.find((item) => item.data.id === id);
- const index = optionsRef.current.findIndex((option) => {
- return (
- option.element.compareDocumentPosition(element) &
- Node.DOCUMENT_POSITION_PRECEDING
- );
- });
+ const index = findElementPosition(optionsRef.current, element);
if (!option) {
if (index === -1) {
diff --git a/packages/core/stories/combo-box/combo-box.stories.tsx b/packages/core/stories/combo-box/combo-box.stories.tsx
index 3051a18b9c3..63521e56576 100644
--- a/packages/core/stories/combo-box/combo-box.stories.tsx
+++ b/packages/core/stories/combo-box/combo-box.stories.tsx
@@ -911,3 +911,15 @@ export const Bordered = () => {
);
};
+
+export const PerformanceTest = () => {
+ return (
+
+ {Array.from({ length: 10000 }).map((_, index) => (
+
+ ))}
+
+ );
+};