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);