use floating portal to make menu items list always visible

aboutbits · Oct 20, 2023 · bc9bc84 · bc9bc84
1 parent 80f845e
commit bc9bc84
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
@@ -1,6 +1,12 @@
 import { Menu as HeadlessMenu } from '@headlessui/react'
 import { Fragment, ReactElement, ReactNode, ReactPortal } from 'react'
-import { autoUpdate, useFloating, flip, offset } from '@floating-ui/react'
+import {
+  autoUpdate,
+  useFloating,
+  flip,
+  offset,
+  FloatingPortal,
+} from '@floating-ui/react'
 import classNames from 'classnames'
 import { useTheme } from '../../framework'
 import { remToPx } from '../util/remToPx'
@@ -74,13 +80,17 @@ export function Menu({ className, children, button, placement }: MenuProps) {
                 })
               : button}
           </HeadlessMenu.Button>
-          <HeadlessMenu.Items
-            ref={refs.setFloating}
-            className={menu.list.base}
-            style={floatingStyles}
-          >
-            {children}
-          </HeadlessMenu.Items>
+          {open && (
+            <FloatingPortal>
+              <HeadlessMenu.Items
+                ref={refs.setFloating}
+                className={menu.list.base}
+                style={floatingStyles}
+              >
+                {children}
+              </HeadlessMenu.Items>
+            </FloatingPortal>
+          )}
         </>
       )}
     </HeadlessMenu>

diff --git a/src/examples/Menu.stories.tsx b/src/examples/Menu.stories.tsx
@@ -36,10 +36,15 @@ const meta = {
       }, [])
 
       return (
-        <div className="h-96 overflow-y-scroll border-2" tabIndex={-1}>
-          <div className="flex h-[70rem] items-center justify-center">
-            <div ref={elementRef}>
-              <Story />
+        <div className="h-screen overflow-y-scroll border-2" tabIndex={-1}>
+          <div className="flex h-[100rem] items-center justify-center">
+            <div>
+              Nested container
+              <div className="overflow-hidden border-2 p-10">
+                <div ref={elementRef}>
+                  <Story />
+                </div>
+              </div>
             </div>
           </div>
         </div>