From 2f74889bcb0d43590b82159eb7d2b8608b97de6d Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Fri, 21 Aug 2026 20:45:31 -0700
Subject: [PATCH] fix: Cancel the pending debounced resize when the media
 dimensions container disconnects (#2700)

- Closes: #2699
---
 .../media-dimensions-container-controller.ts  |  1 +
 ...ia-dimensions-container-controller.test.ts | 33 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/components-lib/media-dimensions-container-controller.ts b/src/components-lib/media-dimensions-container-controller.ts
index 994d0d12..0da396ef 100644
--- a/src/components-lib/media-dimensions-container-controller.ts
+++ b/src/components-lib/media-dimensions-container-controller.ts
@@ -60,6 +60,7 @@ export class MediaDimensionsContainerController implements ReactiveController {
   public hostDisconnected(): void {
     this._resizeObserver.disconnect();
     this._removeInnerContainerListeners();
+    this.resize.cancel();
   }
 
   private _removeInnerContainerListeners(): void {
diff --git a/tests/components-lib/media-dimensions-container-controller.test.ts b/tests/components-lib/media-dimensions-container-controller.test.ts
index 68855f16..500fe6d5 100644
--- a/tests/components-lib/media-dimensions-container-controller.test.ts
+++ b/tests/components-lib/media-dimensions-container-controller.test.ts
@@ -80,6 +80,39 @@ describe('MediaDimensionsContainerController', () => {
       expect(observer?.disconnect).toHaveBeenCalled();
     });
 
+    it('should cancel a pending resize on disconnect', () => {
+      const host = createLitElement();
+      host.getBoundingClientRect = vi.fn().mockReturnValue({
+        height: 200,
+        width: 200,
+      });
+
+      const innerContainer = document.createElement('div');
+      innerContainer.getBoundingClientRect = vi.fn().mockReturnValue({
+        height: 90,
+        width: 160,
+      });
+      const outerContainer = document.createElement('div');
+
+      const controller = new MediaDimensionsContainerController(host);
+
+      Object.defineProperty(host, 'isConnected', {
+        value: true,
+      });
+      controller.hostConnected();
+
+      controller.setConfig(configWithRotation);
+      controller.setContainers(innerContainer, outerContainer);
+
+      host.removeAttribute('rotated');
+
+      innerContainer.dispatchEvent(new Event('slotchange'));
+      controller.hostDisconnected();
+      vi.advanceTimersByTime(RESIZE_DEBOUNCE_SECONDS * 1000);
+
+      expect(host.hasAttribute('rotated')).toBeFalsy();
+    });
+
     it('should connect and disconnect with a container when host is connected', () => {
       const host = createLitElement();
       Object.defineProperty(host, 'isConnected', {