From 71b9ff5abec886f1336974ee7d994dccec6f1d9c Mon Sep 17 00:00:00 2001
From: Nick De Villiers <nick.devilliers@canonical.com>
Date: Wed, 8 Nov 2023 13:19:49 +0200
Subject: [PATCH] fix: remove focus from menu button after click (#34)

---
 .../Navigation/MenuButton/MenuButton.tsx      | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/lib/sections/Navigation/MenuButton/MenuButton.tsx b/src/lib/sections/Navigation/MenuButton/MenuButton.tsx
index 3209376..fd20412 100644
--- a/src/lib/sections/Navigation/MenuButton/MenuButton.tsx
+++ b/src/lib/sections/Navigation/MenuButton/MenuButton.tsx
@@ -9,11 +9,29 @@ export interface NavigationMenuButtonProps {
   onClick: ButtonProps["onClick"];
 }
 
-export const MenuButton = ({ children, className, onClick }: NavigationMenuButtonProps) => {
-
+export const MenuButton = ({
+  children,
+  className,
+  onClick,
+}: NavigationMenuButtonProps) => {
   return (
-    <Button appearance="base" className={classNames("p-side-navigation__button--menu has-icon is-dark", className)} onClick={onClick}>
+    <Button
+      appearance="base"
+      className={classNames(
+        "p-side-navigation__button--menu has-icon is-dark",
+        className,
+      )}
+      onClick={(e) => {
+        if (onClick) {
+          onClick(e);
+        }
+        // Make sure the button does not have focus
+        // .l-navigation remains open with :focus-within
+        e.stopPropagation();
+        e.currentTarget.blur();
+      }}
+    >
       {children}
     </Button>
-  )
-}
+  );
+};