Fix/1298 (#1542)

* fix(modal): focus trap added * chore(navbar): changeset added
nextui-org · Sep 1, 2023 · 57909ac · 57909ac
1 parent 7a17256
commit 57909ac
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/.changeset/blue-days-work.md b/.changeset/blue-days-work.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/navbar": patch
+---
+
+Fix #1298 navbar-menu focus trapping fixed
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
@@ -5,7 +5,7 @@ import {AnimatePresence, HTMLMotionProps, motion} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {ReactElement, useCallback} from "react";
 import {RemoveScroll} from "react-remove-scroll";
-import {Overlay} from "@react-aria/overlays";
+import {Overlay, DismissButton} from "@react-aria/overlays";
 
 import {menuVariants} from "./navbar-menu-transitions";
 import {useNavbarContext} from "./navbar-context";
@@ -27,15 +27,20 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
   const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
   const domRef = useDOMRef(ref);
 
-  const {slots, isMenuOpen, height, disableAnimation, classNames} = useNavbarContext();
+  const {slots, isMenuOpen, setIsMenuOpen, height, disableAnimation, classNames} =
+    useNavbarContext();
 
   const styles = clsx(classNames?.menu, className);
 
   const MenuWrapper = useCallback(
     ({children}: {children: ReactElement}) => {
       return (
         <RemoveScroll forwardProps enabled={isMenuOpen} removeScrollBar={false}>
-          {children}
+          <>
+            <DismissButton onDismiss={() => setIsMenuOpen(false)} />
+            {children}
+            <DismissButton onDismiss={() => setIsMenuOpen(false)} />
+          </>
         </RemoveScroll>
       );
     },