Set the container height on every resize.

dermotduffy · Sep 5, 2023 · 25150be · 25150be
1 parent 07bc639
commit 25150be
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git 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
@@ -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);
   });