diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
index 5ab4d2a3967..3c307d25026 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -12,8 +12,8 @@ import {
t9n,
} from "../../tests/commonTests";
import { getFocusedElementProp } from "../../tests/utils";
+import { DEBOUNCE } from "../../utils/resources";
import { CSS, SLOTS } from "./resources";
-import { overflowActionsDebounceInMs } from "./utils";
describe("calcite-action-bar", () => {
describe("renders", () => {
@@ -406,7 +406,7 @@ describe("calcite-action-bar", () => {
`,
});
- await page.waitForTimeout(overflowActionsDebounceInMs);
+ await page.waitForTimeout(DEBOUNCE.resize);
expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(2);
expect(await page.findAll(slottedActionsSelector)).toHaveLength(0);
@@ -423,7 +423,7 @@ describe("calcite-action-bar", () => {
`,
);
});
- await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+ await page.waitForTimeout(DEBOUNCE.resize + 10);
await page.waitForChanges();
expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
@@ -454,7 +454,7 @@ describe("calcite-action-bar", () => {
`,
);
await page.waitForChanges();
- await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+ await page.waitForTimeout(DEBOUNCE.resize + 10);
expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
expect(await page.findAll(slottedActionsSelector)).toHaveLength(0);
@@ -462,7 +462,7 @@ describe("calcite-action-bar", () => {
const actionBar = await page.find("calcite-action-bar");
actionBar.setProperty("overflowActionsDisabled", false);
await page.waitForChanges();
- await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+ await page.waitForTimeout(DEBOUNCE.resize + 10);
expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
@@ -490,7 +490,7 @@ describe("calcite-action-bar", () => {
`,
});
- await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+ await page.waitForTimeout(DEBOUNCE.resize + 10);
expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
@@ -499,7 +499,7 @@ describe("calcite-action-bar", () => {
element.style.height = "550px";
});
- await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+ await page.waitForTimeout(DEBOUNCE.resize + 10);
await page.waitForChanges();
expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index 21e37492fb7..cac8a0e6794 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -40,15 +40,10 @@ import {
import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
import { Layout, Position, Scale } from "../interfaces";
import { OverlayPositioning } from "../../utils/floating-ui";
+import { DEBOUNCE } from "../../utils/resources";
import { ActionBarMessages } from "./assets/action-bar/t9n";
import { CSS, SLOTS } from "./resources";
-import {
- geActionDimensions,
- getOverflowCount,
- overflowActions,
- overflowActionsDebounceInMs,
- queryActions,
-} from "./utils";
+import { geActionDimensions, getOverflowCount, overflowActions, queryActions } from "./utils";
/**
* @slot - A slot for adding `calcite-action`s that will appear at the top of the component.
@@ -342,7 +337,7 @@ export class ActionBar
expanded,
overflowCount,
});
- }, overflowActionsDebounceInMs);
+ }, DEBOUNCE.resize);
toggleExpand = (): void => {
this.expanded = !this.expanded;
diff --git a/packages/calcite-components/src/components/action-bar/utils.ts b/packages/calcite-components/src/components/action-bar/utils.ts
index 3e1d00be951..b41e2994f6a 100644
--- a/packages/calcite-components/src/components/action-bar/utils.ts
+++ b/packages/calcite-components/src/components/action-bar/utils.ts
@@ -3,7 +3,6 @@ import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources";
import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
import { Layout } from "../interfaces";
-export const overflowActionsDebounceInMs = 150;
const groupBufferPx = 2;
const getAverage = (arr: number[]) => arr.reduce((p, c) => p + c, 0) / arr.length;
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index 3ed9429205e..477b553198e 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -17,6 +17,7 @@ import { CSS as ComboboxItemCSS } from "../combobox-item/resources";
import { CSS as XButtonCSS } from "../functional/XButton";
import { getElementXY, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
import { assertCaretPosition } from "../../tests/utils";
+import { DEBOUNCE } from "../../utils/resources";
import { CSS } from "./resources";
const selectionModes = ["single", "single-persist", "ancestors", "multiple"];
@@ -201,6 +202,7 @@ describe("calcite-combobox", () => {
await combobox.type(text);
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await combobox.getProperty("open")).toBe(true);
@@ -209,6 +211,7 @@ describe("calcite-combobox", () => {
}
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await combobox.getProperty("open")).toBe(false);
});
@@ -256,6 +259,7 @@ describe("calcite-combobox", () => {
await page.waitForChanges();
await input.type("undefined");
+ await page.waitForTimeout(DEBOUNCE.filter);
await page.waitForChanges();
expect(await items[0].isVisible()).toBe(false);
@@ -287,6 +291,7 @@ describe("calcite-combobox", () => {
await combobox.press("s");
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(filterEventSpy).toHaveReceivedEventTimes(1);
expect(await items[0].isVisible()).toBe(true);
@@ -299,6 +304,7 @@ describe("calcite-combobox", () => {
await combobox.press("i");
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(filterEventSpy).toHaveReceivedEventTimes(2);
expect(await items[0].isVisible()).toBe(true);
@@ -311,6 +317,7 @@ describe("calcite-combobox", () => {
await combobox.press("n");
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(filterEventSpy).toHaveReceivedEventTimes(3);
expect(await items[0].isVisible()).toBe(true);
@@ -342,6 +349,7 @@ describe("calcite-combobox", () => {
await page.waitForChanges();
await combobox.type("Algeria");
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const [lastItemX, lastItemY] = await getElementXY(page, "#item-4");
@@ -369,6 +377,7 @@ describe("calcite-combobox", () => {
await page.waitForChanges();
await combobox.type("two");
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const one = await (await page.find("#one")).isVisible();
const two = await (await page.find("#two")).isVisible();
const three = await (await page.find("#three")).isVisible();
@@ -407,6 +416,7 @@ describe("calcite-combobox", () => {
const page = await newE2EPage();
await page.setContent(html` ${nestedComboboxChildren} `);
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const visibleItemsAndGroups = await page.findAll(
"calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])",
@@ -434,6 +444,7 @@ describe("calcite-combobox", () => {
const combobox = await page.find("calcite-combobox");
combobox.setProperty("filterText", "1.2");
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const filteredItemsAndGroups = await page.findAll(
"calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])",
@@ -454,6 +465,7 @@ describe("calcite-combobox", () => {
combobox.setProperty("filterText", "");
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const allVisibleItemAndGroups = await page.findAll(
"calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])",
@@ -500,10 +512,13 @@ describe("calcite-combobox", () => {
});
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const combobox = await page.find("calcite-combobox");
combobox.setProperty("filterText", "foo");
+
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const visibleItems = await page.findAll("calcite-combobox-item:not([hidden])");
@@ -1733,11 +1748,27 @@ describe("calcite-combobox", () => {
const button = await page.find("button");
await input.click();
await input.press("o");
+
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
+
await input.press("Tab");
+
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
+
let chips = await page.findAll("calcite-combobox >>> calcite-chip");
expect(chips.length).toBe(1);
await input.press("j");
+
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
+
await button.click();
+
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
+
chips = await page.findAll("calcite-combobox >>> calcite-chip");
expect(chips.length).toBe(2);
});
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 4a1cbbd715f..d25b899523d 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -56,6 +56,7 @@ import {
import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import { createObserver } from "../../utils/observers";
import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { DEBOUNCE } from "../../utils/resources";
import {
connectMessages,
disconnectMessages,
@@ -1128,7 +1129,7 @@ export class Combobox
if (emit) {
this.calciteComboboxFilterChange.emit();
}
- }, 100);
+ }, DEBOUNCE.filter);
})();
internalComboboxChangeEvent = (): void => {
diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts
index 45d9961c93e..3a76f81fd33 100644
--- a/packages/calcite-components/src/components/filter/filter.e2e.ts
+++ b/packages/calcite-components/src/components/filter/filter.e2e.ts
@@ -1,7 +1,7 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
import { CSS as INPUT_CSS } from "../input/resources";
-import { DEBOUNCE_TIMEOUT } from "./resources";
+import { DEBOUNCE } from "../../utils/resources";
describe("calcite-filter", () => {
describe("renders", () => {
@@ -190,7 +190,7 @@ describe("calcite-filter", () => {
it("updates filtered items after filtering", async () => {
const filter = await page.find("calcite-filter");
const filterChangeSpy = await page.spyOnEvent("calciteFilterChange");
- await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+ await page.waitForTimeout(DEBOUNCE.filter);
await page.waitForChanges();
expect(filterChangeSpy).toHaveReceivedEventTimes(0);
@@ -215,7 +215,7 @@ describe("calcite-filter", () => {
await page.$eval("calcite-filter", (filter: HTMLCalciteFilterElement): void => {
filter.items = filter.items.slice(3);
});
- await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+ await page.waitForTimeout(DEBOUNCE.filter);
await page.waitForChanges();
assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]);
@@ -274,7 +274,7 @@ describe("calcite-filter", () => {
it("should return matching value", async () => {
const filter = await page.find("calcite-filter");
- await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+ await page.waitForTimeout(DEBOUNCE.filter);
assertMatchingItems(await filter.getProperty("filteredItems"), ["harry"]);
});
@@ -282,7 +282,7 @@ describe("calcite-filter", () => {
const filter = await page.find("calcite-filter");
filter.setProperty("filterProps", ["description"]);
await page.waitForChanges();
- await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+ await page.waitForTimeout(DEBOUNCE.filter);
assertMatchingItems(await filter.getProperty("filteredItems"), []);
});
});
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index 9635f41daad..fd07e46c181 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -34,8 +34,9 @@ import {
updateMessages,
} from "../../utils/t9n";
import { Scale } from "../interfaces";
+import { DEBOUNCE } from "../../utils/resources";
import { FilterMessages } from "./assets/filter/t9n";
-import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources";
+import { CSS, ICONS } from "./resources";
@Component({
tag: "calcite-filter",
@@ -235,7 +236,7 @@ export class Filter
(value: string, emit = false, onFilter?: () => void): void =>
this.items.length &&
this.updateFiltered(filter(this.items, value, this.filterProps), emit, onFilter),
- DEBOUNCE_TIMEOUT,
+ DEBOUNCE.filter,
);
inputHandler = (event: CustomEvent): void => {
diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts
index 0adab7cd3b8..cf06f61b465 100644
--- a/packages/calcite-components/src/components/filter/resources.ts
+++ b/packages/calcite-components/src/components/filter/resources.ts
@@ -7,5 +7,3 @@ export const ICONS = {
search: "search",
close: "x",
} as const;
-
-export const DEBOUNCE_TIMEOUT = 250;
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
index ffbaad12b96..d2a0feb9cd5 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
@@ -13,6 +13,7 @@ import {
t9n,
} from "../../tests/commonTests";
import { TagAndPage } from "../../tests/commonTests/interfaces";
+import { DEBOUNCE } from "../../utils/resources";
import { toUserFriendlyName } from "./utils";
/*
@@ -227,6 +228,7 @@ describe("calcite-input-time-zone", () => {
await input.click();
await input.type(searchTerms[0]);
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])");
@@ -235,6 +237,7 @@ describe("calcite-input-time-zone", () => {
await clearSearchTerm(searchTerms[0]);
await input.type(searchTerms[1]);
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])");
@@ -243,6 +246,7 @@ describe("calcite-input-time-zone", () => {
await clearSearchTerm(searchTerms[1]);
await input.type(searchTerms[2]);
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])");
@@ -250,6 +254,7 @@ describe("calcite-input-time-zone", () => {
await clearSearchTerm(searchTerms[1]);
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])");
@@ -448,6 +453,7 @@ describe("calcite-input-time-zone", () => {
await page.waitForChanges();
await input.type("(GMT-6)");
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const sharedOffsetTimeZoneItems = await page.findAll(
"calcite-input-time-zone >>> calcite-combobox-item:not([hidden])",
@@ -456,6 +462,7 @@ describe("calcite-input-time-zone", () => {
await sharedOffsetTimeZoneItems[1].click();
await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
const selectedTimeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]");
const expectedTimeZoneItem = testTimeZoneItems[3];
diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts
index 10169f764d3..6e70e5c8cf7 100644
--- a/packages/calcite-components/src/components/input/input.e2e.ts
+++ b/packages/calcite-components/src/components/input/input.e2e.ts
@@ -15,6 +15,7 @@ import { html } from "../../../support/formatting";
import { letterKeys, numberKeys } from "../../utils/key";
import { locales, numberStringFormatter } from "../../utils/locale";
import { getElementRect, getElementXY, selectText } from "../../tests/utils";
+import { DEBOUNCE } from "../../utils/resources";
import { assertCaretPosition } from "../../tests/utils";
import { testHiddenInputSyncing, testPostValidationFocusing, testWorkaroundForGlobalPropRemoval } from "./common/tests";
@@ -809,6 +810,10 @@ describe("calcite-input", () => {
await element.callMethod("setFocus");
await page.waitForChanges();
await typeNumberValue(page, inputFirstPart);
+
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
+
expect(await element.getProperty("value")).toBe(inputFirstPart);
expect(calciteInputInput).toHaveReceivedEventTimes(5);
expect(calciteInputChange).toHaveReceivedEventTimes(0);
@@ -829,6 +834,10 @@ describe("calcite-input", () => {
await element.callMethod("setFocus");
await page.waitForChanges();
await typeNumberValue(page, textSecondPart);
+
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.filter);
+
expect(calciteInputInput).toHaveReceivedEventTimes(10);
expect(calciteInputChange).toHaveReceivedEventTimes(1);
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index eb5e128e9dc..18d0953e8ec 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -3,9 +3,8 @@ import { accessible, hidden, renders, focusable, disabled, defaults, t9n } from
import { placeholderImage } from "../../../.storybook/placeholderImage";
import { html } from "../../../support/formatting";
import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources";
-import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources";
import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils";
-import { debounceTimeout } from "./resources";
+import { DEBOUNCE } from "../../utils/resources";
import { ListDragDetail } from "./interfaces";
const placeholder = placeholderImage({
@@ -13,8 +12,6 @@ const placeholder = placeholderImage({
height: 100,
});
-const listDebounceTimeout = debounceTimeout + FILTER_DEBOUNCE_TIMEOUT;
-
describe("calcite-list", () => {
describe("defaults", () => {
defaults("calcite-list", [
@@ -154,7 +151,7 @@ describe("calcite-list", () => {
);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
let dragHandleValues = [true, false, true, true, false, true, true];
@@ -170,7 +167,7 @@ describe("calcite-list", () => {
rootList.setProperty("dragEnabled", false);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
dragHandleValues = [false, false, true, true, false, false, false];
@@ -210,7 +207,7 @@ describe("calcite-list", () => {
);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
let dragHandleValues = [true, false, true, true, false, true, true];
@@ -226,7 +223,7 @@ describe("calcite-list", () => {
rootList.setProperty("dragEnabled", false);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
dragHandleValues = [false, false, true, true, false, false, false];
@@ -341,7 +338,7 @@ describe("calcite-list", () => {
await page.waitForChanges();
const list = await page.find("calcite-list");
const filter = await page.find(`calcite-list >>> calcite-filter`);
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await list.getProperty("filteredItems")).toHaveLength(2);
expect(await list.getProperty("filteredData")).toHaveLength(2);
expect(await list.getProperty("filterText")).toBeUndefined();
@@ -352,7 +349,7 @@ describe("calcite-list", () => {
const calciteListFilterEvent = list.waitForEvent("calciteListFilter");
await page.keyboard.type("one");
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
await calciteListFilterEvent;
expect(await list.getProperty("filteredItems")).toHaveLength(1);
expect(await list.getProperty("filteredData")).toHaveLength(1);
@@ -366,7 +363,7 @@ describe("calcite-list", () => {
const calciteListFilterEvent2 = list.waitForEvent("calciteListFilter");
await page.keyboard.type("two");
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
await calciteListFilterEvent2;
expect(await list.getProperty("filteredItems")).toHaveLength(1);
expect(await list.getProperty("filteredData")).toHaveLength(1);
@@ -375,7 +372,7 @@ describe("calcite-list", () => {
const calciteListFilterEvent3 = list.waitForEvent("calciteListFilter");
await page.keyboard.type(" blah");
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
await calciteListFilterEvent3;
expect(await list.getProperty("filteredItems")).toHaveLength(0);
expect(await list.getProperty("filteredData")).toHaveLength(0);
@@ -401,14 +398,14 @@ describe("calcite-list", () => {
const list = await page.find("calcite-list");
const listItems = await page.findAll("calcite-list-item");
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await list.getProperty("filteredItems")).toHaveLength(3);
expect(await list.getProperty("filteredData")).toHaveLength(3);
expect(await list.getProperty("filterText")).toBeUndefined();
listItems[0].setProperty("selected", true);
list.setProperty("filterText", "two");
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
await page.waitForChanges();
let selectedItemValues = await getSelectedItemValues();
expect(selectedItemValues).toHaveLength(1);
@@ -423,7 +420,7 @@ describe("calcite-list", () => {
list.setProperty("filterText", "three");
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
listItems[2].setProperty("selected", true);
await page.waitForChanges();
selectedItemValues = await getSelectedItemValues();
@@ -473,7 +470,7 @@ describe("calcite-list", () => {
await page.waitForChanges();
const list = await page.find("calcite-list");
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await list.getProperty("filteredItems")).toHaveLength(3);
expect(await list.getProperty("filteredData")).toHaveLength(3);
@@ -518,7 +515,7 @@ describe("calcite-list", () => {
const list = await page.find("calcite-list");
list.setProperty("filterProps", ["label", "description"]);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await list.getProperty("filteredItems")).toHaveLength(2);
expect(await list.getProperty("filteredData")).toHaveLength(2);
@@ -543,7 +540,7 @@ describe("calcite-list", () => {
`,
);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
const list = await page.find("calcite-list");
const items = await page.findAll("calcite-list-item");
@@ -558,7 +555,7 @@ describe("calcite-list", () => {
await items[0].click();
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(eventSpy).toHaveReceivedEventTimes(1);
expect(await list.getProperty("selectedItems")).toHaveLength(1);
@@ -569,7 +566,7 @@ describe("calcite-list", () => {
await page.$eval("#item-4", clickItemContent, `.${ListItemCSS.contentContainer}`);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(eventSpy).toHaveReceivedEventTimes(2);
expect(await list.getProperty("selectedItems")).toHaveLength(4);
@@ -581,7 +578,7 @@ describe("calcite-list", () => {
await items[3].click();
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(eventSpy).toHaveReceivedEventTimes(3);
expect(await list.getProperty("selectedItems")).toHaveLength(3);
@@ -592,7 +589,7 @@ describe("calcite-list", () => {
await page.$eval("#item-1", clickItemContent, `.${ListItemCSS.contentContainer}`);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(eventSpy).toHaveReceivedEventTimes(4);
expect(await list.getProperty("selectedItems")).toHaveLength(0);
@@ -612,7 +609,7 @@ describe("calcite-list", () => {
`,
);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
const list = await page.find("calcite-list");
const items = await page.findAll("calcite-list-item");
@@ -626,7 +623,7 @@ describe("calcite-list", () => {
await items[1].click();
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(eventSpy).toHaveReceivedEventTimes(1);
expect(await items[0].getProperty("active")).toBe(false);
@@ -645,7 +642,7 @@ describe("calcite-list", () => {
);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
const items = await page.findAll("calcite-list-item");
@@ -658,7 +655,7 @@ describe("calcite-list", () => {
await items[2].click();
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(eventSpy).toHaveReceivedEventTimes(1);
expect(await items[0].getProperty("selected")).toBe(false);
@@ -677,7 +674,7 @@ describe("calcite-list", () => {
);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
const items = await page.findAll("calcite-list-item");
@@ -690,7 +687,7 @@ describe("calcite-list", () => {
await items[2].click();
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(eventSpy).toHaveReceivedEventTimes(1);
expect(await items[0].getProperty("selected")).toBe(false);
@@ -700,7 +697,7 @@ describe("calcite-list", () => {
await items[0].click();
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(eventSpy).toHaveReceivedEventTimes(2);
expect(await items[0].getProperty("selected")).toBe(true);
@@ -738,13 +735,13 @@ describe("calcite-list", () => {
listItemOne.setProperty("selected", true);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await listItemOne.getProperty("selected")).toBe(true);
expect(await list.getProperty("selectedItems")).toHaveLength(1);
listItemOne.setProperty("selected", false);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await listItemOne.getProperty("selected")).toBe(false);
expect(await list.getProperty("selectedItems")).toHaveLength(0);
});
@@ -829,7 +826,7 @@ describe("calcite-list", () => {
const listItemThree = await page.find("#three");
listItemThree.setProperty("disabled", false);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(calciteListChange).toHaveReceivedEventTimes(0);
await list.press("ArrowDown");
@@ -839,7 +836,7 @@ describe("calcite-list", () => {
const listItemFour = await page.find("#four");
listItemFour.setProperty("closed", false);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(calciteListChange).toHaveReceivedEventTimes(0);
await list.press("ArrowDown");
@@ -869,7 +866,7 @@ describe("calcite-list", () => {
`);
await page.waitForChanges();
const list = await page.find("calcite-list");
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
await list.callMethod("setFocus");
await page.waitForChanges();
@@ -1111,7 +1108,7 @@ describe("calcite-list", () => {
await secondDragHandle.click();
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
expect(await items[0].getProperty("active")).toBe(false);
expect(await items[1].getProperty("active")).toBe(true);
@@ -1131,7 +1128,7 @@ describe("calcite-list", () => {
`,
);
await page.waitForChanges();
- await page.waitForTimeout(listDebounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.filter);
return page;
}
@@ -1448,7 +1445,7 @@ describe("calcite-list", () => {
await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await handle.getProperty("selected")).toBe(true);
- await page.waitForTimeout(debounceTimeout);
+ await page.waitForTimeout(DEBOUNCE.nextTick);
startIndex += 1;
const changeHandleLabel = await getAriaLabel();
diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts
index 8562a9f99f9..ec7109968c0 100644
--- a/packages/calcite-components/src/utils/floating-ui.spec.ts
+++ b/packages/calcite-components/src/utils/floating-ui.spec.ts
@@ -1,4 +1,5 @@
import { waitForAnimationFrame } from "../tests/utils";
+import { DEBOUNCE } from "./resources";
import * as floatingUI from "./floating-ui";
import { FloatingUIComponent } from "./floating-ui";
@@ -13,7 +14,6 @@ const {
placements,
positionFloatingUI,
reposition,
- repositionDebounceTimeout,
} = floatingUI;
it("should set calcite placement to FloatingUI placement", () => {
@@ -122,7 +122,7 @@ describe("repositioning", () => {
assertPreOpenPositioning(floatingEl);
- await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout));
+ await new Promise((resolve) => setTimeout(resolve, DEBOUNCE.reposition));
assertOpenPositioning(floatingEl);
});
@@ -139,7 +139,7 @@ describe("repositioning", () => {
floatingUI.reposition(anotherFakeFloatingUiComponent, positionOptions, true);
expect(positionSpy).toHaveBeenCalledTimes(2);
- await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout));
+ await new Promise((resolve) => setTimeout(resolve, DEBOUNCE.reposition));
expect(positionSpy).toHaveBeenCalledTimes(2);
});
});
diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
index 00275044003..532fcd2a0d2 100644
--- a/packages/calcite-components/src/utils/floating-ui.ts
+++ b/packages/calcite-components/src/utils/floating-ui.ts
@@ -18,6 +18,7 @@ import { Build } from "@stencil/core";
import { debounce, DebouncedFunc } from "lodash-es";
import { offsetParent } from "composed-offset-position";
import { Layout } from "../components/interfaces";
+import { DEBOUNCE } from "./resources";
import { getElementDir } from "./dom";
(function setUpFloatingUiForShadowDomPositioning(): void {
@@ -167,11 +168,6 @@ export const positionFloatingUI =
*/
export const placementDataAttribute = "data-placement";
-/**
- * Exported for testing purposes only
- */
-export const repositionDebounceTimeout = 100;
-
export type ReferenceElement = VirtualElement | Element;
type UIType = "menu" | "tooltip" | "popover";
@@ -457,9 +453,9 @@ function getDebouncedReposition(component: FloatingUIComponent): DebouncedFunc