diff --git a/packages/calcite-components/src/components/block-group/block-group.e2e.ts b/packages/calcite-components/src/components/block-group/block-group.e2e.ts
index ecebac63e9e..3b21e114aae 100755
--- a/packages/calcite-components/src/components/block-group/block-group.e2e.ts
+++ b/packages/calcite-components/src/components/block-group/block-group.e2e.ts
@@ -702,5 +702,48 @@ describe("calcite-block-group", () => {
await assertMove("one", "component1", "component2", ["two"], ["one", "three"], 0, 0);
await assertMove("three", "component2", "component1", ["three", "two"], ["one"], 0, 1);
});
+
+ it("updates moveToItems label when menu is opened", async () => {
+ const page = await newE2EPage();
+ const group = "my-group";
+ await page.setContent(
+ html`
+
+
+
+
+
+ `,
+ );
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.nextTick);
+
+ const component1 = await page.find("#component1");
+ const three = await page.find("#three");
+ three.setProperty("sortHandleOpen", true);
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.nextTick);
+
+ let moveToItems: string[] = await page.$eval("#three", (item: Block["el"]) =>
+ item.moveToItems.map((moveToItem) => moveToItem.label),
+ );
+ expect(moveToItems.length).toBe(1);
+ expect(moveToItems[0]).toBe("Group 1");
+
+ three.setProperty("sortHandleOpen", false);
+ await page.waitForChanges();
+
+ const newLabel = "New label";
+ component1.setProperty("label", newLabel);
+ three.setProperty("sortHandleOpen", true);
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.nextTick);
+
+ moveToItems = await page.$eval("#three", (item: Block["el"]) =>
+ item.moveToItems.map((moveToItem) => moveToItem.label),
+ );
+ expect(moveToItems.length).toBe(1);
+ expect(moveToItems[0]).toBe(newLabel);
+ });
});
});
diff --git a/packages/calcite-components/src/components/block-group/block-group.tsx b/packages/calcite-components/src/components/block-group/block-group.tsx
index 57b02516ca7..6d8667bd24d 100755
--- a/packages/calcite-components/src/components/block-group/block-group.tsx
+++ b/packages/calcite-components/src/components/block-group/block-group.tsx
@@ -180,6 +180,7 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort
"calciteInternalAssistiveTextChange",
this.handleCalciteInternalAssistiveTextChange,
);
+ this.listen("calciteBlockSortHandleBeforeOpen", this.updateBlockItemsDebounced);
this.listen("calciteSortHandleReorder", this.handleSortReorder);
this.listen("calciteSortHandleMove", this.handleSortMove);
this.listen("calciteSortHandleAdd", this.handleSortAdd);
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 241e8dce194..a3981dd4fc8 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -2199,6 +2199,49 @@ describe("calcite-list", () => {
await assertMove("one", "list1", "list2", ["two"], ["one", "three"], 0, 0);
await assertMove("three", "list2", "list1", ["three", "two"], ["one"], 0, 1);
});
+
+ it("updates moveToItems label when menu is opened", async () => {
+ const page = await newE2EPage();
+ const group = "my-group";
+ await page.setContent(
+ html`
+
+
+
+
+
+ `,
+ );
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.nextTick);
+
+ const component1 = await page.find("#component1");
+ const three = await page.find("#three");
+ three.setProperty("sortHandleOpen", true);
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.nextTick);
+
+ let moveToItems: string[] = await page.$eval("#three", (item: ListItem["el"]) =>
+ item.moveToItems.map((moveToItem) => moveToItem.label),
+ );
+ expect(moveToItems.length).toBe(1);
+ expect(moveToItems[0]).toBe("Group 1");
+
+ three.setProperty("sortHandleOpen", false);
+ await page.waitForChanges();
+
+ const newLabel = "New label";
+ component1.setProperty("label", newLabel);
+ three.setProperty("sortHandleOpen", true);
+ await page.waitForChanges();
+ await page.waitForTimeout(DEBOUNCE.nextTick);
+
+ moveToItems = await page.$eval("#three", (item: ListItem["el"]) =>
+ item.moveToItems.map((moveToItem) => moveToItem.label),
+ );
+ expect(moveToItems.length).toBe(1);
+ expect(moveToItems[0]).toBe(newLabel);
+ });
});
describe.skip("group filtering", () => {
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 608d1c43ab7..5666525a925 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -367,6 +367,7 @@ export class List extends LitElement implements InteractiveComponent, SortableCo
"calciteInternalAssistiveTextChange",
this.handleCalciteInternalAssistiveTextChange,
);
+ this.listen("calciteListItemSortHandleBeforeOpen", this.updateListItemsDebounced);
this.listen("calciteSortHandleReorder", this.handleSortReorder);
this.listen("calciteSortHandleMove", this.handleSortMove);
this.listen("calciteSortHandleAdd", this.handleSortAdd);