Preventing default action on click, causes Menu to stay opened.

[botsvik]

I try to implement javascript navigation when Menu.Item is clicked. When menu item is an anchor element I prevent browser default action and attach onClick handler to navigate. Now this works great except menu stays opened. Does not happen when navigating and selecting with keyboard.

// This the click handler which navigates
const navigate: MouseEventHandler<HTMLAnchorElement> = (event) => {
  event.preventDefault(); // Commenting out this line returns the behavior, but causes page refresh
  history.push(event.currentTarget.pathname);
};

// This is a header component where menu is located
<Header
  createFeedAnchorProps={{ href: "/create-feed", onClick: navigate }}
  authenticatedUserDropdownProps={{
    userName: "Giorgi Botsvadze",
    items: [
      {
        icon: UserIcon,
        label: "My Account",
        href: "/account",
        onClick: navigate,
      },
      {
        icon: CogIcon,
        label: "Admin Tools",
        href: "/admin-tools",
        onClick: navigate,
      },
      {
        icon: LogoutIcon,
        label: "Logout",
        href: "/auth/logout",
        onClick: navigate,
      },
    ],
  }}
/>

// Somewhere in Header in Menu component
const { icon: Icon, label, ...htmlAnchorAttributes } = authenticatedUserDropdownProps;

<li key={index}>
  <Menu.Item>
    {({ active }) => (
      <a
        {...htmlAnchorAttributes}
        className={clsx(
          "tw-h-8 tw-px-5 hover:tw-no-underline hover:tw-text-black tw-flex tw-items-center tw-text-sm tw-font-semibold tw-text-black",
          active ? "tw-bg-slate-100" : "tw-bg-white"
        )}
      >
        <Icon className="tw-mr-2 tw-w-5 tw-h-5 tw-shrink-0" />
        <span>{label}</span>
      </a>
    )}
  </Menu.Item>
</li>