From 245ee0f7bf0de8388b0e18b9099e01514f92df37 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 1 Aug 2024 11:13:04 -0400
Subject: [PATCH] optional chain disconnects; fixes #2127

---
 docs/pages/resources/changelog.md                   | 4 ++++
 src/components/carousel/carousel.component.ts       | 2 +-
 src/components/details/details.component.ts         | 2 +-
 src/components/range/range.component.ts             | 2 +-
 src/components/split-panel/split-panel.component.ts | 2 +-
 src/components/tab-group/tab-group.component.ts     | 4 ++--
 src/components/textarea/textarea.component.ts       | 2 +-
 src/components/tree/tree.component.ts               | 3 +--
 8 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 1d79ae57..f1df3160 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed a bug that caused errors to show in the console when components disconnect before before `firstUpdated()` executes [#2127]
+
 ## 2.16.0
 
 - Added the Czech translation [#2084]
diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts
index e1204736..0d3d7f94 100644
--- a/src/components/carousel/carousel.component.ts
+++ b/src/components/carousel/carousel.component.ts
@@ -103,7 +103,7 @@ export default class SlCarousel extends ShoelaceElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    this.mutationObserver.disconnect();
+    this.mutationObserver?.disconnect();
   }
 
   protected firstUpdated(): void {
diff --git a/src/components/details/details.component.ts b/src/components/details/details.component.ts
index 2a38fd41..ad379b99 100644
--- a/src/components/details/details.component.ts
+++ b/src/components/details/details.component.ts
@@ -89,7 +89,7 @@ export default class SlDetails extends ShoelaceElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.detailsObserver.disconnect();
+    this.detailsObserver?.disconnect();
   }
 
   private handleSummaryClick(event: MouseEvent) {
diff --git a/src/components/range/range.component.ts b/src/components/range/range.component.ts
index b3b38532..853679b7 100644
--- a/src/components/range/range.component.ts
+++ b/src/components/range/range.component.ts
@@ -132,7 +132,7 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.input);
+    this.resizeObserver?.unobserve(this.input);
   }
 
   private handleChange() {
diff --git a/src/components/split-panel/split-panel.component.ts b/src/components/split-panel/split-panel.component.ts
index c61d014a..d2d2411a 100644
--- a/src/components/split-panel/split-panel.component.ts
+++ b/src/components/split-panel/split-panel.component.ts
@@ -85,7 +85,7 @@ export default class SlSplitPanel extends ShoelaceElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this);
+    this.resizeObserver?.unobserve(this);
   }
 
   private detectSize() {
diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts
index cfbd917f..14e03f0d 100644
--- a/src/components/tab-group/tab-group.component.ts
+++ b/src/components/tab-group/tab-group.component.ts
@@ -120,8 +120,8 @@ export default class SlTabGroup extends ShoelaceElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.mutationObserver.disconnect();
-    this.resizeObserver.unobserve(this.nav);
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.unobserve(this.nav);
   }
 
   private getAllTabs() {
diff --git a/src/components/textarea/textarea.component.ts b/src/components/textarea/textarea.component.ts
index d0dd8d5d..9a176df2 100644
--- a/src/components/textarea/textarea.component.ts
+++ b/src/components/textarea/textarea.component.ts
@@ -164,7 +164,7 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.input) {
-      this.resizeObserver.unobserve(this.input);
+      this.resizeObserver?.unobserve(this.input);
     }
   }
 
diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts
index 23ac4663..a9bb1a1c 100644
--- a/src/components/tree/tree.component.ts
+++ b/src/components/tree/tree.component.ts
@@ -111,8 +111,7 @@ export default class SlTree extends ShoelaceElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-
-    this.mutationObserver.disconnect();
+    this.mutationObserver?.disconnect();
   }
 
   // Generates a clone of the expand icon element to use for each tree item