fix menu overlay by putting it in popper

scaleflex · Mar 30, 2021 · c138548 · c138548
1 parent 774bcc1
commit c138548
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 6 deletions.
diff --git a/packages/ui/src/core/menu/menu.component.tsx b/packages/ui/src/core/menu/menu.component.tsx
@@ -25,6 +25,7 @@ const Menu = intrinsicComponent<MenuProps, HTMLDivElement>(
       maxHeight,
       position,
       popperOptions,
+      enableOverlay,
       ...rest
     },
     ref
@@ -94,8 +95,14 @@ const Menu = intrinsicComponent<MenuProps, HTMLDivElement>(
 
     return (
       <>
-        <Styled.Overlay onClick={handleClose} />
-        <Popper ref={menuRef} position={position || 'bottom'} open={Boolean(anchorEl)} anchorEl={anchorEl}>
+        <Popper
+          ref={menuRef}
+          position={position || 'bottom'}
+          open={Boolean(anchorEl)}
+          anchorEl={anchorEl}
+          overlay={Boolean(enableOverlay)}
+          onClick={handleClose}
+        >
           <Styled.Menu
             {...containerProps}
             alignCenter={Boolean(alignCenter)}
@@ -140,6 +147,7 @@ export const propTypes = {
   maxHeight: PT.oneOfType([PT.string, PT.number]),
   popperOptions: popperPropTypes.popperOptions,
   position: PT.oneOf(objectValues(Position)),
+  enableOverlay: PT.bool,
 };
 
 Menu.propTypes = propTypes;

diff --git a/packages/ui/src/core/menu/menu.props.d.ts b/packages/ui/src/core/menu/menu.props.d.ts
@@ -18,4 +18,5 @@ export interface MenuProps extends PropsWithChildren, React.HTMLAttributes<HTMLD
   maxHeight?: string | number;
   position?: PopperPositionType;
   popperOptions?: PopperOptions;
+  enableOverlay?: boolean;
 }
diff --git a/packages/ui/src/core/popper/popper.component.tsx b/packages/ui/src/core/popper/popper.component.tsx
@@ -12,10 +12,20 @@ import Styled from './popper.styles';
 
 const Popper = intrinsicComponent<PopperProps, HTMLDivElement>(
   (
-    { anchorEl, children, open, position: initialPlacement = 'bottom', popperOptions }: PopperProps,
+    {
+      anchorEl,
+      children,
+      open,
+      position: initialPlacement = 'bottom',
+      popperOptions,
+      onClick,
+      overlay = false,
+    }: PopperProps,
     ref
   ): JSX.Element => {
     const target = usePortal(generateClassNames('Popper'));
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const overlayTarget = document.querySelector('body')!;
     const Ref = useRef(null);
     const ownRef = useForkRef(Ref, ref);
 
@@ -49,7 +59,15 @@ const Popper = intrinsicComponent<PopperProps, HTMLDivElement>(
       </Styled.Popper>
     );
 
-    return createPortal(render(), target);
+    const renderOverlay = (): JSX.Element => <Styled.Overlay onClick={onClick} />;
+
+    return (
+      <>
+        {createPortal(render(), target)}
+
+        {overlay && createPortal(renderOverlay(), overlayTarget)}
+      </>
+    );
   }
 );
 
@@ -86,6 +104,7 @@ export const propTypes = {
     placement: PT.oneOf(objectValues(Position)),
     strategy: PT.oneOf(objectValues(Strategy)),
   }) as Validator<PopperOptions>,
+  overlay: PT.bool,
 };
 
 Popper.propTypes = propTypes;

diff --git a/packages/ui/src/core/popper/popper.props.d.ts b/packages/ui/src/core/popper/popper.props.d.ts
@@ -30,4 +30,5 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
   position: TooltipPositionType;
   popperOptions?: PopperOptions;
   open: boolean;
+  overlay?: boolean;
 }
diff --git a/packages/ui/src/core/popper/popper.styles.ts b/packages/ui/src/core/popper/popper.styles.ts
@@ -11,6 +11,19 @@ const Popper = styled.div.attrs({
   `
 );
 
-const Styled = applyDisplayNames({ Popper });
+const Overlay = styled.div.attrs({
+  className: generateClassNames(baseClassName, 'Overlay'),
+})(
+  () => css`
+    position: fixed;
+    right: 0px;
+    bottom: 0px;
+    top: 0px;
+    left: 0px;
+    background-color: transparent;
+    z-index: -1;
+  `
+);
+const Styled = applyDisplayNames({ Popper, Overlay });
 
 export default Styled;
diff --git a/packages/ui/stories/core/menu.story.tsx b/packages/ui/stories/core/menu.story.tsx
@@ -73,7 +73,7 @@ const BasicTemplate: Story<MenuProps> = ({ ...args }) => {
         Open menu
       </Button>
 
-      <Menu {...args} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu {...args} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose} enableOverlay>
         <MenuItem list={defaultArgs.list} />
         <MenuItem onClick={handleClose}>Item 3</MenuItem>
         <MenuItem onClick={handleClose}>Item 4</MenuItem>