fix(list, block-group): drag menu 'Move to' actions broken when list …

…elements have explicit ids (#11515)

**Related Issue:** #11513

## Summary

- Fix keyboard moving `MoveTo` object to always have unique identifiers
- Previously, it was using the incorrect id
- There's no reason to use the element id so just using a guid makes
more sense here
- Add tests

packages/calcite-components/src/components/block-group/block-group.e2e.ts

@@ -246,6 +246,38 @@ describe("calcite-block-group", () => {
 
       await page.waitForChanges();
 
+      const letterBlockSelector = `calcite-block-group[group="letters"] calcite-block`;
+      const letterBlocks = await findAll(page, letterBlockSelector);
+
+      expect(letterBlocks.length).toBe(6);
+
+      const moveToItemIds = await page.evaluate((letterBlockSelector) => {
+        return Array.from(document.querySelectorAll(letterBlockSelector))
+          .map((item: Block["el"]) => item.moveToItems.map((moveToItem) => moveToItem.id))
+          .flat();
+      }, letterBlockSelector);
+
+      expect(moveToItemIds.length).toBe(6);
+
+      const uniqueMoveToItemIds = new Set(moveToItemIds);
+
+      expect(uniqueMoveToItemIds.size).toBe(2);
+
+      const moveToItemElementIds = await page.evaluate((letterBlockSelector) => {
+        return Array.from(document.querySelectorAll(letterBlockSelector))
+          .map((item: Block["el"]) => item.moveToItems.map((moveToItem) => moveToItem.element.id))
+          .flat();
+      }, letterBlockSelector);
+
+      expect(moveToItemElementIds.length).toBe(6);
+      expect(moveToItemElementIds[0]).toBe("second-letters");
+      expect(moveToItemElementIds[1]).toBe("second-letters");
+
+      expect(moveToItemElementIds[2]).toBe("first-letters");
+      expect(moveToItemElementIds[3]).toBe("first-letters");
+      expect(moveToItemElementIds[4]).toBe("first-letters");
+      expect(moveToItemElementIds[5]).toBe("first-letters");
+
       // Workaround for page.spyOnEvent() failing due to drag event payload being serialized and there being circular JSON structures from the payload elements. See: https://github.com/Esri/calcite-design-system/issues/7643
       await page.evaluate(() => {
         const testWindow = window as TestWindow;

packages/calcite-components/src/components/block-group/block-group.tsx

@@ -204,7 +204,7 @@ export class BlockGroup extends LitElement implements InteractiveComponent, Sort
     this.moveToItems = blockGroups.map((element) => ({
       element,
       label: element.label ?? element.id,
-      id: el.id || guid(),
+      id: guid(),
     }));
   }
 

packages/calcite-components/src/components/list/list.e2e.ts

@@ -1651,6 +1651,38 @@ describe("calcite-list", () => {
 
       await page.waitForChanges();
 
+      const letterItemSelector = `calcite-list[group="letters"] calcite-list-item`;
+      const letterItems = await findAll(page, letterItemSelector);
+
+      expect(letterItems.length).toBe(6);
+
+      const moveToItemIds = await page.evaluate((letterItemSelector) => {
+        return Array.from(document.querySelectorAll(letterItemSelector))
+          .map((item: ListItem["el"]) => item.moveToItems.map((moveToItem) => moveToItem.id))
+          .flat();
+      }, letterItemSelector);
+
+      expect(moveToItemIds.length).toBe(6);
+
+      const uniqueMoveToItemIds = new Set(moveToItemIds);
+
+      expect(uniqueMoveToItemIds.size).toBe(2);
+
+      const moveToItemElementIds = await page.evaluate((letterItemSelector) => {
+        return Array.from(document.querySelectorAll(letterItemSelector))
+          .map((item: ListItem["el"]) => item.moveToItems.map((moveToItem) => moveToItem.element.id))
+          .flat();
+      }, letterItemSelector);
+
+      expect(moveToItemElementIds.length).toBe(6);
+      expect(moveToItemElementIds[0]).toBe("second-letters");
+      expect(moveToItemElementIds[1]).toBe("second-letters");
+
+      expect(moveToItemElementIds[2]).toBe("first-letters");
+      expect(moveToItemElementIds[3]).toBe("first-letters");
+      expect(moveToItemElementIds[4]).toBe("first-letters");
+      expect(moveToItemElementIds[5]).toBe("first-letters");
+
       // Workaround for page.spyOnEvent() failing due to drag event payload being serialized and there being circular JSON structures from the payload elements. See: https://github.com/Esri/calcite-design-system/issues/7643
       await page.evaluate(() => {
         const testWindow = window as TestWindow;

packages/calcite-components/src/components/list/list.tsx

@@ -854,7 +854,7 @@ export class List
     this.moveToItems = lists.map((element) => ({
       element,
       label: element.label ?? element.id,
-      id: el.id || guid(),
+      id: guid(),
     }));
 
     const groupItems = Array.from(this.el.querySelectorAll(listItemGroupSelector));