From 25150be36b843f5568e8b750ae8023b2dedaf6de Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Mon, 4 Sep 2023 20:31:20 -0700
Subject: [PATCH] Set the container height on every resize.

---
 .../embla/plugins/auto-size/auto-size.ts      | 10 ++++++----
 .../embla/plugins/auto-size/auto-size.test.ts | 20 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/utils/embla/plugins/auto-size/auto-size.ts b/src/utils/embla/plugins/auto-size/auto-size.ts
index ee226555..96c41dd9 100644
--- a/src/utils/embla/plugins/auto-size/auto-size.ts
+++ b/src/utils/embla/plugins/auto-size/auto-size.ts
@@ -97,7 +97,7 @@ function AutoSize(): AutoSizeType {
   }
 
   function resizeHandler(entries: ResizeObserverEntry[]): void {
-    let callReInit = false;
+    let resize = false;
 
     for (const entry of entries) {
       const newDimensions: SlideDimensions = {
@@ -113,12 +113,12 @@ function AutoSize(): AutoSizeType {
           oldDimensions?.width !== newDimensions.width)
       ) {
         previousDimensions.set(entry.target, newDimensions);
-        callReInit = true;
+        resize = true;
       }
     }
 
-    if (callReInit) {
-      reInitController?.reinit();
+    if (resize) {
+      debouncedSetContainerHeight();
     }
   }
 
@@ -143,6 +143,8 @@ function AutoSize(): AutoSizeType {
     if (!isNaN(highest) && highest > 0) {
       emblaApi.containerNode().style.maxHeight = `${highest}px`;
     }
+
+    reInitController?.reinit();
   }
 
   const self: AutoSizeType = {
diff --git a/tests/utils/embla/plugins/auto-size/auto-size.test.ts b/tests/utils/embla/plugins/auto-size/auto-size.test.ts
index 412c0fa5..b04784c3 100644
--- a/tests/utils/embla/plugins/auto-size/auto-size.test.ts
+++ b/tests/utils/embla/plugins/auto-size/auto-size.test.ts
@@ -69,18 +69,36 @@ describe('AutoSize', () => {
   it('should correctly handle resize', () => {
     const plugin = AutoSize();
     const parent = createParent();
-    const emblaApi = createEmblaApiInstance({ containerNode: parent });
+    const children = createTestSlideNodes();
+    const emblaApi = createEmblaApiInstance({
+      containerNode: parent,
+      selectedScrollSnap: 0,
+      slideNodes: children,
+      slideRegistry: [[0]],
+    });
 
     plugin.init(emblaApi, createTestEmblaOptionHandler());
 
+    children[0].getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 200,
+      height: 800,
+    });
+
     callResizeHandler([{ target: parent, width: 10, height: 20 }]);
     callResizeHandler([{ target: parent, width: 10, height: 20 }]);
     callResizeHandler([{ target: parent, width: 10, height: 20 }]);
 
+    expect(parent.style.maxHeight).toBe('800px');
     expect(emblaApi.reInit).toBeCalledTimes(1);
 
+    children[0].getBoundingClientRect = vi.fn().mockReturnValue({
+      width: 200,
+      height: 600,
+    });
+
     callResizeHandler([{ target: parent, width: 20, height: 40 }]);
 
+    expect(parent.style.maxHeight).toBe('600px');
     expect(emblaApi.reInit).toBeCalledTimes(2);
   });