Nav Popover not closing on leaving the button

[preet-jhota]

Select Topic Area

Bug

Body

I have a nav bar developed in Reactjs. In that submenus are there which is opening on popover, it is opening on button but not closing when leaving the button i have to drag the mouse to my popover compnent then if i drag outside it will close.

Part of Code:

`

export default function Nav({
openNav,
onCloseNav,
}) {
const pathname = usePathname();
const upLg = useResponsive('up', 'lg');
const { user, logout } = useAuth();
const [openDropdown, setOpenDropdown] = useState(null);
const [anchorEl, setAnchorEl] = useState(null);

const navigate = useNavigate();

const handlePopoverOpen = (event, title) => {
setAnchorEl(event.currentTarget);
setOpenDropdown(title);
};

const handlePopoverClose = () => {
setAnchorEl(null);
setOpenDropdown(null);
};

useEffect(() => {
if (openNav) {
onCloseNav();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pathname]);

const renderMenu = (<Stack component="nav" sx={{ paddingLeft: '4px', paddingRight: '4px' }}>
<Box component="ul" sx={{ padding: 0, display: 'flex', flexDirection: 'column', gap: '8px' }}>
{navConfig
.filter((item) => item.role === 0 || (item.role === 1 && user.role === 1))
.map((item) => item.children ? (<Box
key={item.title}
component="li"
sx={{ listStyle: 'none' }}
onMouseOver={(event) => handlePopoverOpen(event, item.title)}
onMouseOut={handlePopoverClose}
>
<Button
sx={{
borderRadius: '8px',
typography: 'body2',
color: 'grey.500',
textTransform: 'capitalize',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
}}
>
<Box component="span" sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', mb: 1 }}>
<Box component="span" sx={{ width: 22, height: 22, ml: 2, color: 'grey.500' }}>
{item.icon}

<KeyboardArrowRightIcon sx={{ ml: 0.5, alignSelf: 'center', width: 18, height: 18 }} />

<Box component="span" sx={{ fontSize: '13px', textAlign: 'center' }}>{item.title}

<Popover
anchorEl={anchorEl}
open={openDropdown === item.title}
anchorOrigin={{
vertical: 'center', horizontal: 'right',
}}
transformOrigin={{
vertical: 'center', horizontal: 'left',
}}
disableRestoreFocus
PaperProps={{
onMouseOver: () => handlePopoverOpen(anchorEl, item.title),
onMouseOut: handlePopoverClose,
}}
>
{renderSubMenu(item.children)}

) : ())}

);

`

Can someone let me know what i am missing?

[404reese]

To ensure that the popover closes when leaving the button, consider the following steps:

1. Single State for Navbar:
   Instead of managing separate states for opening and closing the navbar, use a single state to control its visibility. Pass this state down from your App.js to the Navbar component.

2. Update Navbar Component:

   // Navbar.js
   import React from 'react';
   
   export default function Navbar({ showNav, setShowNav }) {
     return (
       <>
         {showNav && (
           <div className="w-48 bg-gray-200 h-screen py-10">
             <button
               className="bg-primary w-32 h-12 rounded-lg text-white"
               onClick={() => setShowNav(false)}
             >
               Close Navbar
             </button>
             {/* Add your menu items here */}
           </div>
         )}
       </>
     );
   }

3. Update App Component:

   // App.js
   import React, { useState } from 'react';
   import Navbar from './components/Navbar';
   
   function App() {
     const [showNav, setShowNav] = useState(true);
   
     return (
       <div className="flex">
         <Navbar showNav={showNav} setShowNav={setShowNav} />
         <button
           className="bg-primary w-32 h-12 rounded-lg text-white"
           onClick={() => setShowNav(true)}
         >
           Open Navbar
         </button>
       </div>
     );
   }
   
   export default App;

By using a single state and passing it down to the Navbar component, you'll be able to control the visibility of the navbar more effectively. Adjust the styling and other components as needed for your specific use case.

[preet-jhota]

I was not talking about the NavBar, the issue is with the popover mouseEvents.

Popover opens but closing is not happening if i drag mouse to another button. What to take mouse to the opened popover and then if I darg it out then it will close.