[BUG] - Activating a Modal within the NavbarMenuItem event prevents sliding in any direction on elements within the Modal.

[uyevan]

NextUI Version

2.4.1

Describe the bug

Activating a Modal within the NavbarMenuItem event prevents sliding in any direction on elements within the Modal.Through repeated testing, I have indeed discovered the existence of this issue.
Here is the code I tested：

'use client'
import React from "react";
import {
    Navbar,
    NavbarBrand,
    NavbarMenuToggle,
    NavbarMenuItem,
    NavbarMenu,
    NavbarContent,
    NavbarItem,
    Link,
    Modal, ModalBody, ModalContent, ModalHeader,
    useDisclosure, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, ModalFooter, Button,
} from "@nextui-org/react";
import {NoteIcon} from "@/app/assets/icons/NoteIcon";

export default function Page() {
    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
    const {isOpen, onOpen, onClose} = useDisclosure();

    return (
        <>
            {/*---------- NavBar -----------*/}
            <Navbar
                isBordered
                isMenuOpen={isMenuOpen}
                onMenuOpenChange={setIsMenuOpen}
            >
                <NavbarContent className="sm:hidden" justify="start">
                    <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"}/>
                </NavbarContent>
                <NavbarContent className="sm:hidden pr-3" justify="center">
                    <NavbarBrand>
                        <NoteIcon/>
                        <p className="font-bold text-inherit">ACME</p>
                    </NavbarBrand>
                </NavbarContent>

                <NavbarContent className="hidden sm:flex gap-4" justify="center">
                    <NavbarBrand>
                        <NoteIcon/>
                        <p className="font-bold text-inherit">ACME</p>
                    </NavbarBrand>
                    <NavbarItem>
                        <Link color="foreground" href="#"
                              onPress={() => {
                                  /**
                                   * This is a component that only appears in computer mode,
                                   * so there is no need to add code to close NavbarMenu for this.
                                   */
                                  onOpen()
                              }}
                        >
                            Open Modal
                        </Link>
                    </NavbarItem>
                </NavbarContent>

                <NavbarMenu>
                    <NavbarMenuItem key={`open-modal`}>
                        <Link
                            className="w-full"
                            color='success'
                            onPress={() => {
                                /**
                                 * This is the state in mobile mode. If you want to swipe left and right,
                                 * you must turn off NavbarMenu, so you need to add the following code.
                                 */
                                onOpen()//open the Modal.

                                /**
                                 * If this sentence is added, it can slide normally.
                                 */
                                setIsMenuOpen(false);//disable the NavbarMenu.
                            }}
                            size="lg"
                        >
                            open-modal
                        </Link>
                    </NavbarMenuItem>
                </NavbarMenu>
            </Navbar>

            {/*------------ Modal -----------*/}
            <Modal backdrop={'blur'} isOpen={isOpen} onClose={onClose}>
                <ModalContent>
                    {(onClose) => (
                        <>
                            <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
                            <ModalBody>
                                <Table aria-label="Example static collection table">
                                    <TableHeader>
                                        <TableColumn>NAME</TableColumn>
                                        <TableColumn>ROLE</TableColumn>
                                        <TableColumn>STATUS</TableColumn>
                                    </TableHeader>
                                    <TableBody>
                                        <TableRow key="1">
                                            <TableCell>Tony Reichert</TableCell>
                                            <TableCell>CEO</TableCell>
                                            <TableCell>Active</TableCell>
                                        </TableRow>
                                        <TableRow key="2">
                                            <TableCell>Zoey Lang</TableCell>
                                            <TableCell>Technical Lead</TableCell>
                                            <TableCell>Paused</TableCell>
                                        </TableRow>
                                        <TableRow key="3">
                                            <TableCell>Jane Fisher</TableCell>
                                            <TableCell>Senior Developer</TableCell>
                                            <TableCell>Active</TableCell>
                                        </TableRow>
                                        <TableRow key="4">
                                            <TableCell>William Howard</TableCell>
                                            <TableCell>Community Manager</TableCell>
                                            <TableCell>Vacation-Looooooooooooooooonnnngggggggggggggggggggggggg</TableCell>
                                        </TableRow>
                                    </TableBody>
                                </Table>
                            </ModalBody>
                            <ModalFooter>
                                <Button color="danger" variant="light" onPress={onClose}>
                                    Close
                                </Button>
                                <Button color="primary" onPress={onClose}>
                                    Action
                                </Button>
                            </ModalFooter>
                        </>
                    )}
                </ModalContent>
            </Modal>
        </>
    );
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a NavBar component and its internal NavbarMenuItem element
2. In the onPress event of the NavbarMenuItem element, we activate a Modal
3. Insert a Table component or other element with a width greater than the screen width inside the activated Modal
4. When we click on NavbarMenu Item, the Modal will pop up. If we don't close NavbarMenu Item, we won't be able to slide in any direction within the Modal. If we close it, it will be normal.

Expected behavior

I hope to be able to slide elements within Modal without closing NavbarMenu Item.

Screenshots or Videos

Operating System Version

Windows11

Browser

Chrome

[linear[bot]]

ENG-990 [BUG] - Activating a Modal within the NavbarMenuItem event prevents sliding in any direction on elements within the Modal.

[ryo-manba]

Thanks for the issue! The issue is caused by NavBarMenu using RemoveScroll. https://github.com/nextui-org/nextui/blob/canary/packages/components/navbar/src/navbar-menu.tsx#L34-L40

Removing RemoveScroll like this will fix the issue:

const MenuWrapper =  ({children}: {children: ReactElement}) => {
    return <>{children}</>
}

However, doing so will allow the outer content to scroll when menu item are displayed, which is not ideal for the user experience.

The NextUI NavBar code example and the APG Navigation Menubar Example use Links for menu items. It might be worth reconsidering the logic of displaying popups like dialogs from NavBar menu items.

If needed, Dropdown might be more suitable for this purpose.