fix(dropdown-group): set selectionMode on slotted dropdown-item child…

…ren (#7897)

**Related Issue:** #7707

## Summary

- Correctly observes mutation changes and updates selectionMode on
slotted children
- Adds test

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

@@ -1,4 +1,6 @@
+import { newE2EPage } from "@stencil/core/testing";
 import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 
 describe("calcite-dropdown-group", () => {
   describe("defaults", () => {
@@ -26,4 +28,38 @@ describe("calcite-dropdown-group", () => {
   describe("honors hidden attribute", () => {
     hidden("calcite-dropdown-group");
   });
+
+  it("sets selectionMode on slotted dropdown item children", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(html`<calcite-dropdown-group>
+      <calcite-dropdown-item>Mountain</calcite-dropdown-item>
+      <calcite-dropdown-item>River</calcite-dropdown-item>
+    </calcite-dropdown-group>`);
+
+    await page.waitForChanges();
+
+    let items = await page.findAll("calcite-dropdown-item");
+    expect(items.length).toBe(2);
+    items.forEach(async (item) => expect(await item.getProperty("selectionMode")).toBe("single"));
+
+    const dropdownGroup = await page.find("calcite-dropdown-group");
+    dropdownGroup.setProperty("selectionMode", "none");
+    await page.waitForChanges();
+
+    items = await page.findAll("calcite-dropdown-item");
+    expect(items.length).toBe(2);
+    items.forEach(async (item) => expect(await item.getProperty("selectionMode")).toBe("none"));
+
+    await page.evaluate(() => {
+      const dropdownGroup = document.querySelector("calcite-dropdown-group");
+      const newItem = document.createElement("calcite-dropdown-item");
+      newItem.innerText = "Lake";
+      dropdownGroup.appendChild(newItem);
+    });
+
+    items = await page.findAll("calcite-dropdown-item");
+    expect(items.length).toBe(3);
+    items.forEach(async (item) => expect(await item.getProperty("selectionMode")).toBe("none"));
+  });
 });

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

@@ -75,12 +75,17 @@ export class DropdownGroup {
 
   connectedCallback(): void {
     this.updateItems();
+    this.mutationObserver?.observe(this.el, { childList: true });
   }
 
   componentWillLoad(): void {
     this.groupPosition = this.getGroupPosition();
   }
 
+  disconnectedCallback(): void {
+    this.mutationObserver?.disconnect();
+  }
+
   render(): VNode {
     const groupTitle = this.groupTitle ? (
       <span aria-hidden="true" class="dropdown-title">