fix(popover/menu): scrollbar now appears when content exceeds maximum size

When there were many options in a Select, a scrollbar did not appear. Just as it did not appear in a Menu, whose max-height was not respected.

With this commit, these problems have been solved.

Author: pedroanuda

packages/actify/src/components/Menus/MenuPopover.tsx

@@ -17,6 +17,12 @@ export interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
 }
 
 const MenuPopover = ({ children, ...props }: PopoverProps) => {
+  const dialogRef = React.useRef<HTMLDivElement>(null);
+
+  const onAnimationComplete = React.useCallback(() => {
+    dialogRef.current?.classList.add(styles['open']);
+  }, [dialogRef])
+
   // make the width of the popover the same as the reference element
   if (props.referenceWidth) {
     props.style = {
@@ -33,14 +39,16 @@ const MenuPopover = ({ children, ...props }: PopoverProps) => {
           overflow: 'hidden'
         }}
         animate={{
-          height: 'auto'
+          height: 'auto',
+          maxHeight: 'inherit',
         }}
         transition={{
           duration: 0.3
         }}
+        onAnimationComplete={onAnimationComplete}
       >
         <OverlayArrow className={styles['underlay']} />
-        <Dialog aria-label="dialog" className={styles['dialog']}>
+        <Dialog aria-label="dialog" className={styles['dialog']} ref={dialogRef}>
           {children}
         </Dialog>
       </motion.div>

packages/actify/src/components/Menus/menu-popover.module.css

@@ -28,3 +28,7 @@
   );
   scrollbar-width: inherit;
 }
+
+.dialog.open {
+  overflow: auto;
+}

packages/actify/src/components/Popover/Popover.tsx

@@ -83,6 +83,11 @@ const Popover = (props: PopoverProps & React.RefAttributes<HTMLElement>) => {
     } as React.CSSProperties
   }
 
+  // apply a class that enables scrolling if necessary
+  const onAnimationComplete = React.useCallback(() => {
+    popoverRef.current?.classList.add(styles['open']);
+  }, [popoverRef])
+
   return (
     <Overlay>
       <div {...underlayProps} className={styles['underlay']} />
@@ -91,8 +96,10 @@ const Popover = (props: PopoverProps & React.RefAttributes<HTMLElement>) => {
         {...popoverProps}
         className={styles['popover']}
         initial={{
-          height: 0
+          height: 0,
+          overflow: 'hidden'
         }}
+        onAnimationComplete={onAnimationComplete}
         animate={{
           height: 'auto'
         }}

packages/actify/src/components/Popover/popover.module.css

@@ -23,6 +23,11 @@
   );
   scrollbar-width: inherit;
 }
+
 .popover > ul {
   overflow: hidden;
 }
+
+.popover.open > ul {
+  overflow: auto;
+}