Close Dropdown menu once DropdownMenuNavItem with react-router navigation was clicked

[vitaliirumiantsev-cengage]

Hello!
I'm trying to use DropdownMenuNavItem with react-router navigation. Like that:

import { useNavigate } from 'react-router-dom';
...
// Inside my component
const navigate = useNavigate();

const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
  event.preventDefault();
  event.stopPropagation();

  const to = event.currentTarget.getAttribute('href');

  to && navigate(to);

  return event;
};

  return <Dropdown>
    <DropdownButton>Dropdown Menu Items</DropdownButton>
    <DropdownContent>
      <DropdownMenuNavItem to="http://www.google.com" onClick={handleClick}>
        Google
      </DropdownMenuNavItem>
      <DropdownMenuNavItem to="http://www.cengage.com" onClick={handleClick}>
        Cengage
      </DropdownMenuNavItem>
    </DropdownContent>
  </Dropdown>
  ...

And I noticed that when I click on some item inside menu then page is changed but dropdown menu remains opened.
Is it possible to close Dropdown menu once DropdownMenuNavItem with react-router navigation was clicked ?

Suggestion 1:
Close menu once item clicked like this implemented inside DropdownMenuItem https://github.com/cengage/react-magma/blob/dev/packages/react-magma-dom/src/components/Dropdown/DropdownMenuItem.tsx#L156

Suggestion 2:
Provide access to Dropdown context so users can close Dropdown menu by themselves from custom Dropdown item component. Currently DrodownContext is not exported from react-magma-dom.
Like this:

const CustomDropdownNavigationItem = (props: DropdownMenuItemProps) => {
  const dropdownContext = React.useContext(DropdownContext);
  const navigate = useNavigate();
  
  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault();
    event.stopPropagation();

    dropdownContext.closeDropdown(event);
    
    const to = event.currentTarget.getAttribute('href');

    to && navigate(to);

    return event;
  };
  
  return <DropdownMenuNavItem {...props} onClick={handleClick} />;
};

[silvalaura]

@vitaliirumiantsev-cengage This seems reasonable. I think we can go with the first suggestion for simplicity. Thanks for bringing this up.

If you have availability and need this soon, feel free to contribute a PR that we will review and merge. Otherwise this ticket will go through our usual refinement process and we will address it based on priorities.