fix(usePosition): change style when target dont fit screen

RocketChat · May 27, 2022 · 41c5c37 · 41c5c37
1 parent 5518b00
commit 41c5c37
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/fuselage-hooks/src/usePosition.spec.ts b/packages/fuselage-hooks/src/usePosition.spec.ts
@@ -244,5 +244,24 @@ describe('usePosition hook', () => {
       expect(result.style.left).toEqual('50px');
       expect(result.style.top).toEqual('110px');
     });
+    it('returns a style for placement bottom-end if the element height does not fit container height', () => {
+      const targetBoundaries = getTargetBoundaries({ referenceBox, target });
+      const variantStore = getVariantBoundaries({ referenceBox, target });
+      const result = getPositionStyle({
+        placement: 'bottom-end',
+        container: {
+          ...container,
+          bottom: 50,
+          height: 50,
+        },
+        targetBoundaries,
+        variantStore,
+        target,
+      });
+      console.log(result.style);
+      expect(result.style.overflowY).toEqual('auto');
+      expect(result.style.left).toEqual('50px');
+      expect(result.style.top).toEqual('300px');
+    });
   });
 });
diff --git a/packages/fuselage-hooks/src/usePosition.ts b/packages/fuselage-hooks/src/usePosition.ts
@@ -57,15 +57,16 @@ type PositionStyle = {
   position?: 'fixed';
   ZIndex: '9999';
   transition: 'none !important';
-  bottom?: 0;
-  display: 'flex';
+  bottom?: '0px';
+  overflowY?: 'auto';
 };
 
 type PositionEmptyResult = {
   visibility: 'hidden';
   top: '-9999px';
   left: '-9999px';
   position: 'fixed';
+  overflowY?: 'initial';
 };
 
 type PositionResult = {
@@ -235,8 +236,8 @@ export const getPositionStyle = ({
       left: `${variantPoint}px`,
       position: 'fixed',
       ...(bottom < target.height + point && {
-        bottom: margin,
-        display: 'flex',
+        bottom: `${margin}px`,
+        overflowY: 'auto',
       }),
       ZIndex: '9999',
     },