diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts b/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
index 0add1eba961..1cc55f19187 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
@@ -76,6 +76,23 @@ describe("calcite-dropdown-group", () => {
     }
   });
 
+  it("does not throw if removed right after append", async () => {
+    async function runTest(): Promise<void> {
+      const page = await newE2EPage();
+      // group needs to load early for error to occur
+      await page.setContent(html`<calcite-dropdown-group></calcite-dropdown-group>`);
+
+      await page.evaluate(() => {
+        const dropdownGroup = document.createElement("calcite-dropdown-group");
+        document.body.append(dropdownGroup);
+        dropdownGroup.remove();
+      });
+      await page.waitForChanges();
+    }
+
+    await expect(runTest()).resolves.toBeUndefined();
+  });
+
   describe("theme", () => {
     const tokens: ComponentTestTokens = {
       "--calcite-dropdown-group-border-color": [
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
index 2c1eafd2252..4ec84992499 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
@@ -27,9 +27,6 @@ export class DropdownGroup extends LitElement {
 
   // #region Private Properties
 
-  /** position of group within a dropdown */
-  private groupPosition: number;
-
   private mutationObserver = createObserver("mutation", () => this.updateItems());
 
   /** the requested group */
@@ -45,6 +42,13 @@ export class DropdownGroup extends LitElement {
   /** Specifies and displays a group title. */
   @property({ reflect: true }) groupTitle: string;
 
+  /**
+   * The position of the group in the dropdown menu.
+   *
+   * @internal
+   */
+  @property() position: number = -1;
+
   /**
    * Specifies the size of the component inherited from the parent `calcite-dropdown`, defaults to `m`.
    *
@@ -87,10 +91,6 @@ export class DropdownGroup extends LitElement {
     this.mutationObserver?.observe(this.el, { childList: true });
   }
 
-  load(): void {
-    this.groupPosition = this.getGroupPosition();
-  }
-
   override willUpdate(changes: PropertyValues<this>): void {
     /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
@@ -123,13 +123,6 @@ export class DropdownGroup extends LitElement {
     );
   }
 
-  private getGroupPosition(): number {
-    return Array.prototype.indexOf.call(
-      this.el.parentElement.querySelectorAll("calcite-dropdown-group"),
-      this.el,
-    );
-  }
-
   // #endregion
 
   // #region Rendering
@@ -142,7 +135,7 @@ export class DropdownGroup extends LitElement {
     ) : null;
 
     const dropdownSeparator =
-      this.groupPosition > 0 ? <div class={CSS.separator} role="separator" /> : null;
+      this.position > 0 ? <div class={CSS.separator} role="separator" /> : null;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
     this.el.ariaLabel = this.groupTitle;
     /* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 93e41422e30..1dc08334b9e 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -311,7 +311,7 @@ export class Dropdown
 
   private handlePropsChange(): void {
     this.updateItems();
-    this.updateGroupScale();
+    this.updateGroupProps();
   }
 
   private closeCalciteDropdownOnClick(event: MouseEvent): void {
@@ -431,11 +431,14 @@ export class Dropdown
     this.groups = groups;
 
     this.updateItems();
-    this.updateGroupScale();
+    this.updateGroupProps();
   }
 
-  private updateGroupScale(): void {
-    this.groups?.forEach((group) => (group.scale = this.scale));
+  private updateGroupProps(): void {
+    this.groups.forEach((group, index) => {
+      group.scale = this.scale;
+      group.position = index;
+    });
   }
 
   private resizeObserverCallback(entries: ResizeObserverEntry[]): void {